feat: remove Administration workspace — keep only Verwaltung + Suche
- Delete all ops page components (ReviewQueue, AIMonitoring, Governance, SourceMonitoring, ActivityTimeline, SignalPipeline) - Remove OPERATIONS workspace from AppShell config, nav order, path detection - Remove all /ops/* routes from App.tsx - Remove WorkspaceType.OPERATIONS from allowedWorkspaces in authService, sessionStore, permissions - Keep MarketIntelligence page (already moved to /supply/market-intelligence) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -1,242 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Box, Chip, MenuItem, Select, Typography } from '@mui/material'
|
||||
import { Bot } from 'lucide-react'
|
||||
import {
|
||||
AIMonitoringMetrics,
|
||||
AIOutputTable,
|
||||
AIOutputDetailPanel,
|
||||
AIMonitoringEmptyState,
|
||||
} from '../../components/ai-monitoring'
|
||||
import { useAIOutputs, useUpdateAIOutputReviewStatus } from '../../hooks/useAIMonitoring'
|
||||
import { useToastStore } from '../../stores/toastStore'
|
||||
import type { AIOutput, AIOutputType } from '../../domain/aiOutput'
|
||||
import type { ReviewStatus } from '../../domain/enums'
|
||||
|
||||
interface Filters {
|
||||
type: AIOutputType | ''
|
||||
reviewStatus: ReviewStatus | ''
|
||||
hasError: boolean | null
|
||||
}
|
||||
|
||||
const TYPE_LABELS: Record<AIOutputType, string> = {
|
||||
NEED_PARSE: 'Bedarf-Parsing',
|
||||
FOLLOW_UP_QUESTIONS: 'Rückfragen',
|
||||
MATCH_EXPLANATION: 'Match-Begründung',
|
||||
COMPARE_SUMMARY: 'Vergleich',
|
||||
DECISION_BRIEF: 'Entscheidungs-Brief',
|
||||
DATA_QUALITY_SUMMARY: 'Datenqualität',
|
||||
}
|
||||
|
||||
const AI_OUTPUT_TYPES: AIOutputType[] = [
|
||||
'NEED_PARSE',
|
||||
'FOLLOW_UP_QUESTIONS',
|
||||
'MATCH_EXPLANATION',
|
||||
'COMPARE_SUMMARY',
|
||||
'DECISION_BRIEF',
|
||||
'DATA_QUALITY_SUMMARY',
|
||||
]
|
||||
|
||||
const REVIEW_STATUSES: ReviewStatus[] = ['UNREVIEWED', 'IN_REVIEW', 'APPROVED', 'REJECTED', 'FLAGGED']
|
||||
const STATUS_LABELS: Record<ReviewStatus, string> = {
|
||||
UNREVIEWED: 'Ungeprüft',
|
||||
IN_REVIEW: 'In Prüfung',
|
||||
APPROVED: 'Genehmigt',
|
||||
REJECTED: 'Abgelehnt',
|
||||
FLAGGED: 'Markiert',
|
||||
}
|
||||
|
||||
function applyFilters(outputs: AIOutput[], filters: Filters): AIOutput[] {
|
||||
return outputs.filter(o => {
|
||||
if (filters.type && o.type !== filters.type) return false
|
||||
if (filters.reviewStatus && o.reviewStatus !== filters.reviewStatus) return false
|
||||
if (filters.hasError === true && !o.error) return false
|
||||
if (filters.hasError === false && !!o.error) return false
|
||||
return true
|
||||
})
|
||||
}
|
||||
|
||||
export default function AIMonitoring() {
|
||||
const [filters, setFilters] = useState<Filters>({ type: '', reviewStatus: '', hasError: null })
|
||||
const [selectedOutput, setSelectedOutput] = useState<AIOutput | null>(null)
|
||||
|
||||
const showToast = useToastStore((s) => s.showToast)
|
||||
const { data: allOutputs = [], isLoading } = useAIOutputs()
|
||||
const updateStatus = useUpdateAIOutputReviewStatus()
|
||||
|
||||
const filtered = applyFilters(allOutputs, filters)
|
||||
|
||||
const failedCount = allOutputs.filter(o => !!o.error).length
|
||||
const pendingCount = allOutputs.filter(o => o.reviewStatus === 'UNREVIEWED' || o.reviewStatus === 'FLAGGED').length
|
||||
|
||||
const STATUS_TOAST: Record<ReviewStatus, string> = {
|
||||
UNREVIEWED: 'Status zurückgesetzt.',
|
||||
IN_REVIEW: 'Output zur Prüfung markiert.',
|
||||
APPROVED: 'Output genehmigt.',
|
||||
REJECTED: 'Output abgelehnt.',
|
||||
FLAGGED: 'Output markiert.',
|
||||
}
|
||||
|
||||
const handleUpdateStatus = (status: ReviewStatus) => {
|
||||
if (!selectedOutput) return
|
||||
updateStatus.mutate(
|
||||
{ id: selectedOutput.id, status },
|
||||
{
|
||||
onSuccess: (res) => {
|
||||
setSelectedOutput(res.data)
|
||||
showToast(STATUS_TOAST[status] ?? 'Status aktualisiert.')
|
||||
},
|
||||
onError: () => showToast('Statusänderung fehlgeschlagen.', 'error'),
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const activeFilterCount = [filters.type, filters.reviewStatus, filters.hasError !== null].filter(Boolean).length
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 56px)', overflow: 'hidden' }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 2.5, py: 1.5, flexShrink: 0 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5 }}>
|
||||
<Bot size={18} color="#4f46e5" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1rem', color: '#1e293b' }}>
|
||||
AI Monitoring
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 0.75 }}>
|
||||
{failedCount > 0 && (
|
||||
<Chip
|
||||
label={`${failedCount} Fehler`}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#fee2e2', color: '#991b1b', fontWeight: 600, fontSize: '0.7rem' }}
|
||||
/>
|
||||
)}
|
||||
{pendingCount > 0 && (
|
||||
<Chip
|
||||
label={`${pendingCount} ausstehend`}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#fef3c7', color: '#92400e', fontWeight: 600, fontSize: '0.7rem' }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Transparenz und Governance für KI-generierte Outputs
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Metrics strip */}
|
||||
{!isLoading && <AIMonitoringMetrics outputs={allOutputs} />}
|
||||
|
||||
{/* Filter bar */}
|
||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center', px: 2, py: 0.875, borderBottom: '1px solid #e2e8f0', bgcolor: '#fafafa', flexShrink: 0, flexWrap: 'wrap' }}>
|
||||
<Select
|
||||
size="small"
|
||||
value={filters.type}
|
||||
onChange={e => setFilters(f => ({ ...f, type: e.target.value as AIOutputType | '' }))}
|
||||
displayEmpty
|
||||
sx={{ fontSize: '0.75rem', minWidth: 155 }}
|
||||
>
|
||||
<MenuItem value="">Alle Typen</MenuItem>
|
||||
{AI_OUTPUT_TYPES.map(t => (
|
||||
<MenuItem key={t} value={t} sx={{ fontSize: '0.75rem' }}>{TYPE_LABELS[t]}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
size="small"
|
||||
value={filters.reviewStatus}
|
||||
onChange={e => setFilters(f => ({ ...f, reviewStatus: e.target.value as ReviewStatus | '' }))}
|
||||
displayEmpty
|
||||
sx={{ fontSize: '0.75rem', minWidth: 130 }}
|
||||
>
|
||||
<MenuItem value="">Alle Status</MenuItem>
|
||||
{REVIEW_STATUSES.map(s => (
|
||||
<MenuItem key={s} value={s} sx={{ fontSize: '0.75rem' }}>{STATUS_LABELS[s]}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Chip
|
||||
label="Nur Fehler"
|
||||
size="small"
|
||||
onClick={() => setFilters(f => ({ ...f, hasError: f.hasError === true ? null : true }))}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
bgcolor: filters.hasError === true ? '#fee2e2' : '#f1f5f9',
|
||||
color: filters.hasError === true ? '#991b1b' : '#64748b',
|
||||
fontWeight: filters.hasError === true ? 700 : 400,
|
||||
fontSize: '0.75rem',
|
||||
}}
|
||||
/>
|
||||
|
||||
{activeFilterCount > 0 && (
|
||||
<Chip
|
||||
label="Filter zurücksetzen"
|
||||
size="small"
|
||||
onClick={() => setFilters({ type: '', reviewStatus: '', hasError: null })}
|
||||
sx={{ cursor: 'pointer', fontSize: '0.75rem', color: '#64748b' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Typography variant="caption" color="text.secondary" sx={{ ml: 'auto', whiteSpace: 'nowrap' }}>
|
||||
{activeFilterCount > 0 ? `${filtered.length} / ${allOutputs.length}` : `${allOutputs.length} Outputs`}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Body */}
|
||||
<Box sx={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
{/* Left: table */}
|
||||
<Box sx={{ flex: 1, minWidth: 0, overflowY: 'auto', overflowX: 'auto' }}>
|
||||
{isLoading ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 200 }}>
|
||||
<Typography variant="caption" color="text.secondary">Laden…</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<AIOutputTable
|
||||
outputs={filtered}
|
||||
selectedId={selectedOutput?.id ?? null}
|
||||
onSelect={setSelectedOutput}
|
||||
isEmpty={allOutputs.length === 0}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Right: detail panel */}
|
||||
<Box
|
||||
sx={{
|
||||
width: selectedOutput ? 380 : 0,
|
||||
flexShrink: 0,
|
||||
borderLeft: selectedOutput ? '1px solid #e2e8f0' : 'none',
|
||||
overflow: 'hidden',
|
||||
transition: 'width 0.15s ease',
|
||||
bgcolor: 'white',
|
||||
}}
|
||||
>
|
||||
{selectedOutput ? (
|
||||
<AIOutputDetailPanel
|
||||
output={selectedOutput}
|
||||
onClose={() => setSelectedOutput(null)}
|
||||
onUpdateStatus={handleUpdateStatus}
|
||||
isSubmitting={updateStatus.isPending}
|
||||
/>
|
||||
) : null}
|
||||
</Box>
|
||||
|
||||
{/* Empty selection hint when no panel open */}
|
||||
{!selectedOutput && filtered.length > 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: 260,
|
||||
flexShrink: 0,
|
||||
borderLeft: '1px solid #e2e8f0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
bgcolor: '#fafafa',
|
||||
}}
|
||||
>
|
||||
<AIMonitoringEmptyState context="no-selection" />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -1,362 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Box, Chip, CircularProgress, Stack, Tooltip, Typography } from '@mui/material'
|
||||
import {
|
||||
Activity,
|
||||
Bot,
|
||||
Bookmark,
|
||||
BookmarkCheck,
|
||||
Building2,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
ClipboardList,
|
||||
Edit,
|
||||
FileText,
|
||||
GitMerge,
|
||||
Radar,
|
||||
Search,
|
||||
ServerCog,
|
||||
TrendingUp,
|
||||
User,
|
||||
XCircle,
|
||||
} from 'lucide-react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { governanceService, type ActivityCategory, type ActivityEvent, type ActivityEventType } from '../../services/governanceService'
|
||||
import { EmptyState } from '../../components/ui'
|
||||
|
||||
// ── Labels & colours ──────────────────────────────────────────────────────────
|
||||
|
||||
const EVENT_LABELS: Record<ActivityEventType, string> = {
|
||||
PROPERTY_CREATED: 'Objekt erstellt',
|
||||
PROPERTY_UPDATED: 'Objekt aktualisiert',
|
||||
MATCH_APPROVED: 'Match genehmigt',
|
||||
MATCH_REJECTED: 'Match abgelehnt',
|
||||
SIGNAL_VERIFIED: 'Signal verifiziert',
|
||||
NEED_CREATED: 'Bedarf erstellt',
|
||||
REVIEW_REQUESTED: 'Überprüfung angefordert',
|
||||
AI_PARSE_COMPLETED: 'KI-Analyse abgeschlossen',
|
||||
AI_OUTPUT_REVIEWED: 'KI-Output geprüft',
|
||||
MATCH_GENERATED: 'Matches generiert',
|
||||
FUTURE_SIGNAL_DETECTED: 'Zukunftssignal erkannt',
|
||||
FUTURE_SIGNAL_CONVERTED: 'Signal konvertiert',
|
||||
SHORTLIST_CREATED: 'Shortlist erstellt',
|
||||
SHORTLIST_FINALIZED: 'Shortlist finalisiert',
|
||||
DECISION_BRIEF_CREATED: 'Entscheidungsbriefing erstellt',
|
||||
SOURCE_CRAWLED: 'Quelle gecrawlt',
|
||||
DATA_QUALITY_FLAGGED: 'Datenqualität markiert',
|
||||
REVIEW_COMPLETED: 'Prüfung abgeschlossen',
|
||||
}
|
||||
|
||||
const EVENT_COLORS: Record<ActivityEventType, string> = {
|
||||
PROPERTY_CREATED: '#1e3a5f',
|
||||
PROPERTY_UPDATED: '#1e3a5f',
|
||||
MATCH_APPROVED: '#1a7a4a',
|
||||
MATCH_REJECTED: '#c0392b',
|
||||
SIGNAL_VERIFIED: '#7c3aed',
|
||||
NEED_CREATED: '#0891b2',
|
||||
REVIEW_REQUESTED: '#d97706',
|
||||
AI_PARSE_COMPLETED: '#0891b2',
|
||||
AI_OUTPUT_REVIEWED: '#1a7a4a',
|
||||
MATCH_GENERATED: '#0891b2',
|
||||
FUTURE_SIGNAL_DETECTED: '#7c3aed',
|
||||
FUTURE_SIGNAL_CONVERTED: '#7c3aed',
|
||||
SHORTLIST_CREATED: '#0f766e',
|
||||
SHORTLIST_FINALIZED: '#0f766e',
|
||||
DECISION_BRIEF_CREATED: '#0f766e',
|
||||
SOURCE_CRAWLED: '#6366f1',
|
||||
DATA_QUALITY_FLAGGED: '#ea580c',
|
||||
REVIEW_COMPLETED: '#1a7a4a',
|
||||
}
|
||||
|
||||
const CATEGORY_META: Record<ActivityCategory, { label: string; color: string }> = {
|
||||
SUCHE: { label: 'Suche', color: '#0891b2' },
|
||||
MATCHING: { label: 'Matching', color: '#1a7a4a' },
|
||||
INTELLIGENCE: { label: 'Intelligence', color: '#7c3aed' },
|
||||
REVIEW: { label: 'Review', color: '#d97706' },
|
||||
GOVERNANCE: { label: 'Governance', color: '#1e3a5f' },
|
||||
}
|
||||
|
||||
const ALL_CATEGORIES: ActivityCategory[] = ['SUCHE', 'MATCHING', 'INTELLIGENCE', 'REVIEW', 'GOVERNANCE']
|
||||
|
||||
function getEventIcon(type: ActivityEventType) {
|
||||
const s = 13
|
||||
switch (type) {
|
||||
case 'PROPERTY_CREATED': return <Building2 size={s} color="white" />
|
||||
case 'PROPERTY_UPDATED': return <Edit size={s} color="white" />
|
||||
case 'MATCH_APPROVED': return <CheckCircle size={s} color="white" />
|
||||
case 'MATCH_REJECTED': return <XCircle size={s} color="white" />
|
||||
case 'SIGNAL_VERIFIED': return <TrendingUp size={s} color="white" />
|
||||
case 'NEED_CREATED': return <Search size={s} color="white" />
|
||||
case 'REVIEW_REQUESTED': return <ClipboardList size={s} color="white" />
|
||||
case 'AI_PARSE_COMPLETED':
|
||||
case 'AI_OUTPUT_REVIEWED':
|
||||
case 'MATCH_GENERATED':
|
||||
case 'DECISION_BRIEF_CREATED': return <Bot size={s} color="white" />
|
||||
case 'FUTURE_SIGNAL_DETECTED':
|
||||
case 'FUTURE_SIGNAL_CONVERTED': return <Radar size={s} color="white" />
|
||||
case 'SHORTLIST_CREATED': return <Bookmark size={s} color="white" />
|
||||
case 'SHORTLIST_FINALIZED': return <BookmarkCheck size={s} color="white" />
|
||||
case 'SOURCE_CRAWLED': return <ServerCog size={s} color="white" />
|
||||
case 'DATA_QUALITY_FLAGGED': return <AlertTriangle size={s} color="white" />
|
||||
case 'REVIEW_COMPLETED': return <GitMerge size={s} color="white" />
|
||||
default: return <FileText size={s} color="white" />
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('de-CH', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' })
|
||||
}
|
||||
|
||||
function formatTime(iso: string): string {
|
||||
return new Date(iso).toLocaleTimeString('de-CH', { hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
|
||||
function dateKey(iso: string): string {
|
||||
return iso.slice(0, 10)
|
||||
}
|
||||
|
||||
function isToday(iso: string): boolean {
|
||||
return dateKey(iso) === new Date().toISOString().slice(0, 10)
|
||||
}
|
||||
|
||||
function groupByDate(events: ActivityEvent[]): { key: string; label: string; events: ActivityEvent[] }[] {
|
||||
const map = new Map<string, ActivityEvent[]>()
|
||||
for (const e of events) {
|
||||
const k = dateKey(e.createdAt)
|
||||
if (!map.has(k)) map.set(k, [])
|
||||
map.get(k)!.push(e)
|
||||
}
|
||||
return [...map.entries()]
|
||||
.sort(([a], [b]) => b.localeCompare(a))
|
||||
.map(([key, evts]) => ({
|
||||
key,
|
||||
label: isToday(evts[0].createdAt) ? 'Heute' : formatDate(evts[0].createdAt),
|
||||
events: evts,
|
||||
}))
|
||||
}
|
||||
|
||||
// ── EventRow ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function EventRow({ event, isLast }: { event: ActivityEvent; isLast: boolean }) {
|
||||
const color = EVENT_COLORS[event.type] ?? '#64748b'
|
||||
const catMeta = CATEGORY_META[event.category]
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', gap: 1.5, position: 'relative' }}>
|
||||
{/* Vertical connector */}
|
||||
{!isLast && (
|
||||
<Box sx={{ position: 'absolute', left: 14, top: 32, bottom: -4, width: 2, bgcolor: '#e2e8f0', zIndex: 0 }} />
|
||||
)}
|
||||
|
||||
{/* Icon dot */}
|
||||
<Box
|
||||
sx={{
|
||||
width: 30, height: 30, borderRadius: '50%', bgcolor: color,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
flexShrink: 0, zIndex: 1, boxShadow: '0 0 0 3px white',
|
||||
mt: 0.25,
|
||||
}}
|
||||
>
|
||||
{getEventIcon(event.type)}
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ flex: 1, minWidth: 0, pb: isLast ? 0 : 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, fontSize: '0.8125rem' }}>
|
||||
{EVENT_LABELS[event.type]}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={catMeta.label}
|
||||
size="small"
|
||||
sx={{ height: 16, fontSize: '0.65rem', bgcolor: catMeta.color + '18', color: catMeta.color, fontWeight: 600 }}
|
||||
/>
|
||||
{event.isAiAction && (
|
||||
<Tooltip title="Automatisch durch KI-System ausgeführt">
|
||||
<Chip
|
||||
label="KI"
|
||||
size="small"
|
||||
sx={{ height: 16, fontSize: '0.65rem', bgcolor: '#f1f5f9', color: '#6366f1', fontWeight: 700, cursor: 'default' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
{event.notes && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25, lineHeight: 1.5 }}>
|
||||
{event.notes}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }}>
|
||||
{event.isAiAction
|
||||
? <Bot size={11} color="#6366f1" />
|
||||
: <User size={11} color="#94a3b8" />
|
||||
}
|
||||
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem' }}>
|
||||
{event.isAiAction ? 'KI-System' : event.performedBy}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem', flexShrink: 0, pt: 0.25 }}>
|
||||
{formatTime(event.createdAt)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Page ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ActivityTimeline() {
|
||||
const [filterCategory, setFilterCategory] = useState<ActivityCategory | 'ALL'>('ALL')
|
||||
|
||||
const { data: resp, isLoading, error } = useQuery({
|
||||
queryKey: ['activityTimeline', 'org-wincasa'],
|
||||
queryFn: () => governanceService.getActivityLog('org-wincasa'),
|
||||
staleTime: 30_000,
|
||||
})
|
||||
|
||||
const allEvents = resp?.data ?? []
|
||||
|
||||
const filtered = filterCategory === 'ALL'
|
||||
? allEvents
|
||||
: allEvents.filter(e => e.category === filterCategory)
|
||||
|
||||
const grouped = groupByDate(filtered)
|
||||
|
||||
const aiCount = allEvents.filter(e => e.isAiAction).length
|
||||
const humanCount = allEvents.length - aiCount
|
||||
const uniqueActors = new Set(allEvents.map(e => e.performedBy)).size
|
||||
const todayCount = allEvents.filter(e => isToday(e.createdAt)).length
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 'calc(100vh - 56px)' }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography color="error">Aktivitätsverlauf konnte nicht geladen werden.</Typography>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 56px)', overflow: 'hidden' }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 2.5, py: 1.5, flexShrink: 0 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5 }}>
|
||||
<Activity size={18} color="#1e3a5f" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1rem', color: '#1e293b' }}>
|
||||
Aktivitäts-Timeline
|
||||
</Typography>
|
||||
{/* KPI chips */}
|
||||
<Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>
|
||||
<Chip label={`${allEvents.length} Ereignisse`} size="small" sx={{ bgcolor: '#f1f5f9', color: '#475569', fontSize: '0.7rem' }} />
|
||||
{todayCount > 0 && (
|
||||
<Chip label={`${todayCount} heute`} size="small" sx={{ bgcolor: '#eff6ff', color: '#1e40af', fontWeight: 600, fontSize: '0.7rem' }} />
|
||||
)}
|
||||
<Chip label={`${aiCount} KI-Aktionen`} size="small" sx={{ bgcolor: '#ede9fe', color: '#6366f1', fontWeight: 600, fontSize: '0.7rem' }} />
|
||||
<Chip label={`${humanCount} Menschlich`} size="small" sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', fontWeight: 600, fontSize: '0.7rem' }} />
|
||||
<Chip label={`${uniqueActors} Akteure`} size="small" sx={{ bgcolor: '#f8fafc', color: '#64748b', fontSize: '0.7rem' }} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
End-to-End Aktivitätsverlauf — KI-Aktionen und Menschliche Entscheidungen im Überblick
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Filter bar */}
|
||||
<Box sx={{ px: 2.5, py: 0.875, borderBottom: '1px solid #e2e8f0', bgcolor: '#fafafa', flexShrink: 0 }}>
|
||||
<Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
|
||||
<Chip
|
||||
label="Alle"
|
||||
size="small"
|
||||
clickable
|
||||
onClick={() => setFilterCategory('ALL')}
|
||||
sx={{
|
||||
bgcolor: filterCategory === 'ALL' ? '#1e3a5f' : 'transparent',
|
||||
color: filterCategory === 'ALL' ? 'white' : '#64748b',
|
||||
border: `1px solid ${filterCategory === 'ALL' ? '#1e3a5f' : '#e2e8f0'}`,
|
||||
fontWeight: filterCategory === 'ALL' ? 700 : 400,
|
||||
fontSize: '0.75rem',
|
||||
}}
|
||||
/>
|
||||
{ALL_CATEGORIES.map(cat => {
|
||||
const meta = CATEGORY_META[cat]
|
||||
const active = filterCategory === cat
|
||||
return (
|
||||
<Chip
|
||||
key={cat}
|
||||
label={meta.label}
|
||||
size="small"
|
||||
clickable
|
||||
onClick={() => setFilterCategory(cat)}
|
||||
sx={{
|
||||
bgcolor: active ? meta.color : 'transparent',
|
||||
color: active ? 'white' : meta.color,
|
||||
border: `1px solid ${active ? meta.color : meta.color + '40'}`,
|
||||
fontWeight: active ? 700 : 400,
|
||||
fontSize: '0.75rem',
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{filterCategory !== 'ALL' && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ ml: 'auto', alignSelf: 'center' }}>
|
||||
{filtered.length} von {allEvents.length}
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Timeline body */}
|
||||
<Box sx={{ flex: 1, overflowY: 'auto', px: 2.5, py: 2 }}>
|
||||
{grouped.length === 0 ? (
|
||||
<EmptyState
|
||||
title="Keine Ereignisse"
|
||||
description="Für diesen Filter wurden keine Aktivitäten gefunden."
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ maxWidth: 760, mx: 'auto' }}>
|
||||
{grouped.map(({ key, label, events: dayEvents }) => (
|
||||
<Box key={key} sx={{ mb: 3 }}>
|
||||
{/* Day header */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1.5 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
fontSize: '0.75rem',
|
||||
color: isToday(dayEvents[0].createdAt) ? '#1e3a5f' : '#64748b',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, height: 1, bgcolor: '#e2e8f0' }} />
|
||||
<Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem' }}>
|
||||
{dayEvents.length} Ereignisse
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Events */}
|
||||
<Box sx={{ pl: 0 }}>
|
||||
{dayEvents.map((evt, idx) => (
|
||||
<EventRow key={evt.id} event={evt} isLast={idx === dayEvents.length - 1} />
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -1,361 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Chip,
|
||||
Typography,
|
||||
Stack,
|
||||
CircularProgress,
|
||||
} from '@mui/material'
|
||||
import {
|
||||
Building2,
|
||||
Edit,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
TrendingUp,
|
||||
Search,
|
||||
ClipboardList,
|
||||
Bot,
|
||||
Radar,
|
||||
ServerCog,
|
||||
Bookmark,
|
||||
BookmarkCheck,
|
||||
AlertTriangle,
|
||||
GitMerge,
|
||||
} from 'lucide-react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { governanceService, type ActivityEventType, type ActivityEvent } from '../../services/governanceService'
|
||||
import { EmptyState } from '../../components/ui'
|
||||
|
||||
function getEventLabel(type: ActivityEventType): string {
|
||||
switch (type) {
|
||||
case 'PROPERTY_CREATED': return 'Objekt erstellt'
|
||||
case 'PROPERTY_UPDATED': return 'Objekt aktualisiert'
|
||||
case 'MATCH_APPROVED': return 'Match genehmigt'
|
||||
case 'MATCH_REJECTED': return 'Match abgelehnt'
|
||||
case 'SIGNAL_VERIFIED': return 'Signal verifiziert'
|
||||
case 'NEED_CREATED': return 'Bedarf erstellt'
|
||||
case 'REVIEW_REQUESTED': return 'Überprüfung angefordert'
|
||||
case 'AI_PARSE_COMPLETED': return 'KI-Analyse abgeschlossen'
|
||||
case 'AI_OUTPUT_REVIEWED': return 'KI-Output geprüft'
|
||||
case 'MATCH_GENERATED': return 'Matches generiert'
|
||||
case 'FUTURE_SIGNAL_DETECTED': return 'Zukunftssignal erkannt'
|
||||
case 'FUTURE_SIGNAL_CONVERTED': return 'Signal konvertiert'
|
||||
case 'SHORTLIST_CREATED': return 'Shortlist erstellt'
|
||||
case 'SHORTLIST_FINALIZED': return 'Shortlist finalisiert'
|
||||
case 'DECISION_BRIEF_CREATED': return 'Entscheidungsbriefing erstellt'
|
||||
case 'SOURCE_CRAWLED': return 'Quelle gecrawlt'
|
||||
case 'DATA_QUALITY_FLAGGED': return 'Datenqualität markiert'
|
||||
case 'REVIEW_COMPLETED': return 'Prüfung abgeschlossen'
|
||||
}
|
||||
}
|
||||
|
||||
function getEventDescription(event: ActivityEvent): string {
|
||||
const actor = event.isAiAction ? 'KI-System' : event.performedBy
|
||||
const action = getEventLabel(event.type)
|
||||
return `${actor} — ${action}`
|
||||
}
|
||||
|
||||
function getEventColor(type: ActivityEventType): string {
|
||||
switch (type) {
|
||||
case 'PROPERTY_CREATED':
|
||||
case 'PROPERTY_UPDATED': return '#1e3a5f'
|
||||
case 'MATCH_APPROVED':
|
||||
case 'REVIEW_COMPLETED': return '#1a7a4a'
|
||||
case 'MATCH_REJECTED': return '#c0392b'
|
||||
case 'SIGNAL_VERIFIED':
|
||||
case 'FUTURE_SIGNAL_DETECTED':
|
||||
case 'FUTURE_SIGNAL_CONVERTED': return '#7c3aed'
|
||||
case 'NEED_CREATED':
|
||||
case 'AI_PARSE_COMPLETED':
|
||||
case 'MATCH_GENERATED': return '#0891b2'
|
||||
case 'REVIEW_REQUESTED': return '#d97706'
|
||||
case 'AI_OUTPUT_REVIEWED': return '#1a7a4a'
|
||||
case 'SHORTLIST_CREATED':
|
||||
case 'SHORTLIST_FINALIZED':
|
||||
case 'DECISION_BRIEF_CREATED': return '#0f766e'
|
||||
case 'SOURCE_CRAWLED': return '#6366f1'
|
||||
case 'DATA_QUALITY_FLAGGED': return '#ea580c'
|
||||
}
|
||||
}
|
||||
|
||||
function getEventIcon(type: ActivityEventType) {
|
||||
const size = 14
|
||||
switch (type) {
|
||||
case 'PROPERTY_CREATED': return <Building2 size={size} color="white" />
|
||||
case 'PROPERTY_UPDATED': return <Edit size={size} color="white" />
|
||||
case 'MATCH_APPROVED': return <CheckCircle size={size} color="white" />
|
||||
case 'MATCH_REJECTED': return <XCircle size={size} color="white" />
|
||||
case 'SIGNAL_VERIFIED': return <TrendingUp size={size} color="white" />
|
||||
case 'NEED_CREATED': return <Search size={size} color="white" />
|
||||
case 'REVIEW_REQUESTED': return <ClipboardList size={size} color="white" />
|
||||
case 'AI_PARSE_COMPLETED':
|
||||
case 'AI_OUTPUT_REVIEWED':
|
||||
case 'MATCH_GENERATED':
|
||||
case 'DECISION_BRIEF_CREATED': return <Bot size={size} color="white" />
|
||||
case 'FUTURE_SIGNAL_DETECTED':
|
||||
case 'FUTURE_SIGNAL_CONVERTED': return <Radar size={size} color="white" />
|
||||
case 'SHORTLIST_CREATED': return <Bookmark size={size} color="white" />
|
||||
case 'SHORTLIST_FINALIZED': return <BookmarkCheck size={size} color="white" />
|
||||
case 'SOURCE_CRAWLED': return <ServerCog size={size} color="white" />
|
||||
case 'DATA_QUALITY_FLAGGED': return <AlertTriangle size={size} color="white" />
|
||||
case 'REVIEW_COMPLETED': return <GitMerge size={size} color="white" />
|
||||
}
|
||||
}
|
||||
|
||||
const ALL_EVENT_TYPES: ActivityEventType[] = [
|
||||
'PROPERTY_CREATED',
|
||||
'PROPERTY_UPDATED',
|
||||
'MATCH_APPROVED',
|
||||
'MATCH_REJECTED',
|
||||
'SIGNAL_VERIFIED',
|
||||
'NEED_CREATED',
|
||||
'REVIEW_REQUESTED',
|
||||
'AI_PARSE_COMPLETED',
|
||||
'AI_OUTPUT_REVIEWED',
|
||||
'MATCH_GENERATED',
|
||||
'FUTURE_SIGNAL_DETECTED',
|
||||
'FUTURE_SIGNAL_CONVERTED',
|
||||
'SHORTLIST_CREATED',
|
||||
'SHORTLIST_FINALIZED',
|
||||
'DECISION_BRIEF_CREATED',
|
||||
'SOURCE_CRAWLED',
|
||||
'DATA_QUALITY_FLAGGED',
|
||||
'REVIEW_COMPLETED',
|
||||
]
|
||||
|
||||
function formatDateTime(dateStr: string): string {
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleDateString('de-CH', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
}) + ', ' + d.toLocaleTimeString('de-CH', { hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
|
||||
function isToday(dateStr: string): boolean {
|
||||
const d = new Date(dateStr)
|
||||
const now = new Date()
|
||||
return d.getFullYear() === now.getFullYear() &&
|
||||
d.getMonth() === now.getMonth() &&
|
||||
d.getDate() === now.getDate()
|
||||
}
|
||||
|
||||
export default function Governance() {
|
||||
const [filterType, setFilterType] = useState<ActivityEventType | 'ALL'>('ALL')
|
||||
|
||||
const { data: activityResp, isLoading, error } = useQuery({
|
||||
queryKey: ['activity', 'org-wincasa'],
|
||||
queryFn: () => governanceService.getActivityLog('org-wincasa'),
|
||||
})
|
||||
|
||||
const events = activityResp?.data ?? []
|
||||
|
||||
const presentTypes = [...new Set(events.map(e => e.type))]
|
||||
const todayCount = events.filter(e => isToday(e.createdAt)).length
|
||||
const uniqueUsers = new Set(events.map(e => e.performedBy)).size
|
||||
|
||||
const filtered = filterType === 'ALL'
|
||||
? events
|
||||
: events.filter(e => e.type === filterType)
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 12 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Box sx={{ px: 3, py: 4 }}>
|
||||
<Typography color="error">Fehler beim Laden des Aktivitätslogs.</Typography>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'white',
|
||||
borderBottom: '1px solid #e2e8f0',
|
||||
px: 3,
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
|
||||
Governance & Aktivitätslog
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Vollständiger Audit-Trail aller Plattformaktionen
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button variant="outlined" size="small" disabled>
|
||||
Exportieren
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ px: 3, py: 3 }}>
|
||||
{/* Stats row */}
|
||||
<Box className="grid grid-cols-3 gap-4" sx={{ mb: 3 }}>
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
|
||||
Ereignisse gesamt
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700 }}>
|
||||
{events.length}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">Alle Aktivitäten</Typography>
|
||||
</Card>
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
|
||||
Ereignisse heute
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700 }}>
|
||||
{todayCount}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">Heutige Aktivitäten</Typography>
|
||||
</Card>
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
|
||||
Aktive Benutzer
|
||||
</Typography>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700 }}>
|
||||
{uniqueUsers}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">Unterschiedliche Nutzer</Typography>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Filter chips */}
|
||||
<Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5, mb: 2 }}>
|
||||
<Chip
|
||||
label="Alle"
|
||||
size="small"
|
||||
clickable
|
||||
onClick={() => setFilterType('ALL')}
|
||||
sx={{
|
||||
bgcolor: filterType === 'ALL' ? '#1e3a5f' : 'transparent',
|
||||
color: filterType === 'ALL' ? 'white' : 'text.secondary',
|
||||
border: `1px solid ${filterType === 'ALL' ? '#1e3a5f' : '#e2e8f0'}`,
|
||||
fontWeight: filterType === 'ALL' ? 600 : 400,
|
||||
}}
|
||||
/>
|
||||
{ALL_EVENT_TYPES.filter(t => presentTypes.includes(t)).map(t => (
|
||||
<Chip
|
||||
key={t}
|
||||
label={getEventLabel(t)}
|
||||
size="small"
|
||||
clickable
|
||||
onClick={() => setFilterType(t)}
|
||||
sx={{
|
||||
bgcolor: filterType === t ? getEventColor(t) : 'transparent',
|
||||
color: filterType === t ? 'white' : 'text.secondary',
|
||||
border: `1px solid ${filterType === t ? getEventColor(t) : '#e2e8f0'}`,
|
||||
fontWeight: filterType === t ? 600 : 400,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
{/* Activity Timeline */}
|
||||
<Card sx={{ p: 2.5 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
|
||||
Aktivitätslog
|
||||
</Typography>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<EmptyState
|
||||
title="Keine Ereignisse"
|
||||
description="Für diesen Filter wurden keine Aktivitäten gefunden."
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
{/* Vertical line */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: 15,
|
||||
top: 16,
|
||||
bottom: 16,
|
||||
width: 2,
|
||||
bgcolor: '#e2e8f0',
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Stack spacing={0}>
|
||||
{filtered.map((event, idx) => (
|
||||
<Box
|
||||
key={event.id}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 2,
|
||||
py: 1.5,
|
||||
borderBottom: idx < filtered.length - 1 ? '1px solid #f8fafc' : 'none',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{/* Icon dot */}
|
||||
<Box
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
bgcolor: getEventColor(event.type),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
zIndex: 1,
|
||||
boxShadow: '0 0 0 3px white',
|
||||
}}
|
||||
>
|
||||
{getEventIcon(event.type)}
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ flex: 1, minWidth: 0, pt: 0.5 }}>
|
||||
<Typography variant="body2">
|
||||
{getEventDescription(event)}
|
||||
</Typography>
|
||||
{event.notes && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25 }}>
|
||||
{event.notes}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }}>
|
||||
<Chip
|
||||
label={event.organizationId}
|
||||
size="small"
|
||||
sx={{ fontSize: 10, height: 18, bgcolor: '#f1f5f9', color: '#475569' }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Timestamp */}
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{ flexShrink: 0, pt: 0.5, textAlign: 'right', minWidth: 110 }}
|
||||
>
|
||||
{formatDateTime(event.createdAt)}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -1,200 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Box, Chip, Typography } from '@mui/material'
|
||||
import { ShieldCheck } from 'lucide-react'
|
||||
import {
|
||||
ReviewFilterBar,
|
||||
ReviewTaskCard,
|
||||
ReviewDetailPanel,
|
||||
ReviewEmptyState,
|
||||
} from '../../components/review'
|
||||
import { useReviewQueue, useUpdateReviewStatus, useAddReviewNote } from '../../hooks/useReviewQueue'
|
||||
import { useSessionStore } from '../../stores/sessionStore'
|
||||
import { useToastStore } from '../../stores/toastStore'
|
||||
import type { ReviewTask, ReviewTaskStatus } from '../../domain/review'
|
||||
import type { ReviewFilters } from '../../provider/IReviewProvider'
|
||||
|
||||
function filterTasks(tasks: ReviewTask[], filters: ReviewFilters): ReviewTask[] {
|
||||
return tasks.filter(t => {
|
||||
if (filters.status && t.status !== filters.status) return false
|
||||
if (filters.priority && t.priority !== filters.priority) return false
|
||||
if (filters.entityType && t.entityType !== filters.entityType) return false
|
||||
if (filters.assignedTo && t.assignedTo !== filters.assignedTo) return false
|
||||
return true
|
||||
})
|
||||
}
|
||||
|
||||
export default function ReviewQueue() {
|
||||
const { currentUser } = useSessionStore()
|
||||
const showToast = useToastStore((s) => s.showToast)
|
||||
const userRole = currentUser?.role ?? 'REVIEWER'
|
||||
|
||||
const [filters, setFilters] = useState<ReviewFilters>({})
|
||||
const [selectedTask, setSelectedTask] = useState<ReviewTask | null>(null)
|
||||
|
||||
const { data: allTasks = [], isLoading } = useReviewQueue()
|
||||
const updateStatus = useUpdateReviewStatus()
|
||||
const addNote = useAddReviewNote()
|
||||
|
||||
const filtered = filterTasks(allTasks, filters)
|
||||
|
||||
const pendingCount = allTasks.filter(t => t.status === 'PENDING').length
|
||||
const inReviewCount = allTasks.filter(t => t.status === 'IN_REVIEW').length
|
||||
const escalatedCount = allTasks.filter(t => t.status === 'ESCALATED').length
|
||||
const criticalCount = allTasks.filter(t => t.priority === 'CRITICAL' && (t.status === 'PENDING' || t.status === 'IN_REVIEW')).length
|
||||
|
||||
const STATUS_TOAST: Record<ReviewTaskStatus, string> = {
|
||||
PENDING: 'Status auf "Ausstehend" gesetzt.',
|
||||
IN_REVIEW: 'Aufgabe zur Prüfung übernommen.',
|
||||
APPROVED: 'Aufgabe genehmigt.',
|
||||
REJECTED: 'Aufgabe abgelehnt.',
|
||||
ESCALATED: 'Aufgabe eskaliert.',
|
||||
NEEDS_MORE_DATA: 'Weitere Daten angefordert.',
|
||||
}
|
||||
|
||||
const handleAction = (status: ReviewTaskStatus) => {
|
||||
if (!selectedTask) return
|
||||
updateStatus.mutate(
|
||||
{ id: selectedTask.id, status },
|
||||
{
|
||||
onSuccess: (res) => {
|
||||
setSelectedTask(res.data)
|
||||
showToast(STATUS_TOAST[status] ?? 'Status aktualisiert.')
|
||||
},
|
||||
onError: () => showToast('Statusänderung fehlgeschlagen.', 'error'),
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const handleAddNote = (content: string) => {
|
||||
if (!selectedTask) return
|
||||
addNote.mutate(
|
||||
{ id: selectedTask.id, content },
|
||||
{
|
||||
onSuccess: (res) => {
|
||||
setSelectedTask(res.data)
|
||||
showToast('Notiz hinzugefügt.')
|
||||
},
|
||||
onError: () => showToast('Notiz konnte nicht gespeichert werden.', 'error'),
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const handleSelect = (task: ReviewTask) => {
|
||||
setSelectedTask(task)
|
||||
}
|
||||
|
||||
const isSubmitting = updateStatus.isPending || addNote.isPending
|
||||
|
||||
if (!currentUser || !currentUser.allowedWorkspaces.includes('OPERATIONS')) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 56px)', overflow: 'hidden' }}>
|
||||
<ReviewEmptyState variant="no-permission" />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 56px)', overflow: 'hidden' }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 2.5, py: 1.5, flexShrink: 0 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5 }}>
|
||||
<ShieldCheck size={18} color="#1e3a5f" />
|
||||
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1rem', color: '#1e293b' }}>
|
||||
Review Queue
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>
|
||||
{pendingCount > 0 && (
|
||||
<Chip
|
||||
label={`${pendingCount} Ausstehend`}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#fef3c7', color: '#92400e', fontWeight: 600, fontSize: '0.7rem' }}
|
||||
/>
|
||||
)}
|
||||
{inReviewCount > 0 && (
|
||||
<Chip
|
||||
label={`${inReviewCount} In Prüfung`}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#e0f2fe', color: '#075985', fontWeight: 600, fontSize: '0.7rem' }}
|
||||
/>
|
||||
)}
|
||||
{escalatedCount > 0 && (
|
||||
<Chip
|
||||
label={`${escalatedCount} Eskaliert`}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#fff7ed', color: '#c2410c', fontWeight: 600, fontSize: '0.7rem' }}
|
||||
/>
|
||||
)}
|
||||
{criticalCount > 0 && (
|
||||
<Chip
|
||||
label={`${criticalCount} Kritisch`}
|
||||
size="small"
|
||||
sx={{ bgcolor: '#fee2e2', color: '#991b1b', fontWeight: 600, fontSize: '0.7rem' }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Human-in-the-loop Governance für KI-Outputs, Matches und Datenfehler
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Filter bar */}
|
||||
<ReviewFilterBar
|
||||
filters={filters}
|
||||
onChange={setFilters}
|
||||
totalCount={allTasks.length}
|
||||
filteredCount={filtered.length}
|
||||
/>
|
||||
|
||||
{/* Body */}
|
||||
<Box sx={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
{/* Left: task list */}
|
||||
<Box
|
||||
sx={{
|
||||
width: 360,
|
||||
flexShrink: 0,
|
||||
borderRight: '1px solid #e2e8f0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Typography variant="caption" color="text.secondary">Laden…</Typography>
|
||||
</Box>
|
||||
) : filtered.length === 0 ? (
|
||||
<ReviewEmptyState variant={allTasks.length === 0 ? 'empty-queue' : 'empty-queue'} />
|
||||
) : (
|
||||
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
||||
{filtered.map(task => (
|
||||
<ReviewTaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
isSelected={selectedTask?.id === task.id}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Right: detail panel */}
|
||||
<Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', bgcolor: 'white' }}>
|
||||
{selectedTask ? (
|
||||
<ReviewDetailPanel
|
||||
task={selectedTask}
|
||||
userRole={userRole}
|
||||
onClose={() => setSelectedTask(null)}
|
||||
onAction={handleAction}
|
||||
onAddNote={handleAddNote}
|
||||
isSubmitting={isSubmitting}
|
||||
/>
|
||||
) : (
|
||||
<ReviewEmptyState variant="no-selection" />
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Box } from '@mui/material'
|
||||
import { PageHeader } from '../../components/layout'
|
||||
import { SignalInbox, SignalPipelineView, MarketSignalEmptyState } from '../../components/ops'
|
||||
import { useMarketSignals } from '../../hooks/useMarketSignals'
|
||||
import type { MarketSignalFilters } from '../../domain/marketSignal'
|
||||
|
||||
export default function SignalPipeline() {
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const [filters, setFilters] = useState<MarketSignalFilters>({})
|
||||
const { data: signals = [], isLoading } = useMarketSignals(filters)
|
||||
const selectedSignal = signals.find((s) => s.id === selectedId) ?? null
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||||
<PageHeader
|
||||
title="Signal Pipeline"
|
||||
subtitle="Von der Markt-Evidenz zum strategischen Entscheidungs-Input"
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 360,
|
||||
flexShrink: 0,
|
||||
borderRight: '1px solid #e2e8f0',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<SignalInbox
|
||||
signals={signals}
|
||||
isLoading={isLoading}
|
||||
selectedId={selectedId}
|
||||
onSelect={setSelectedId}
|
||||
filters={filters}
|
||||
onFiltersChange={setFilters}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
|
||||
{selectedSignal
|
||||
? <SignalPipelineView signal={selectedSignal} />
|
||||
: <MarketSignalEmptyState variant="no-selection" />
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Box } from '@mui/material'
|
||||
import { PageHeader } from '../../components/layout'
|
||||
import { SourceList, SourceDetailPanel } from '../../components/ops'
|
||||
import { useDataSources, useDataSource } from '../../hooks/useDataSources'
|
||||
import type { SourceFilters } from '../../domain/dataSource'
|
||||
|
||||
export default function SourceMonitoring() {
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const [filters, setFilters] = useState<SourceFilters>({})
|
||||
|
||||
const { data: sources = [], isLoading } = useDataSources(filters)
|
||||
const { data: selectedSource = null } = useDataSource(selectedId)
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||||
<PageHeader
|
||||
title="Source Monitoring"
|
||||
subtitle="Datenquellen, Connectoren und Import-Runs verwalten"
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
|
||||
{/* Left: Source list — fixed 400px */}
|
||||
<Box
|
||||
sx={{
|
||||
width: 400,
|
||||
flexShrink: 0,
|
||||
borderRight: '1px solid #e2e8f0',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<SourceList
|
||||
sources={sources}
|
||||
isLoading={isLoading}
|
||||
selectedId={selectedId}
|
||||
onSelect={setSelectedId}
|
||||
filters={filters}
|
||||
onFiltersChange={setFilters}
|
||||
/>
|
||||
</Box>
|
||||
{/* Right: Detail panel */}
|
||||
<Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
|
||||
<SourceDetailPanel source={selectedSource} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user