feat: F018 human review queue — 2-panel governance workspace

Replaces the old ad-hoc ReviewQueue page with a full governance-compliant
workflow: filterable task list, detail panel with confidence/risk context,
role-aware approve/reject/escalate/more-data actions, and persistent notes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/ops/ReviewQueue.tsx

@@ -1,377 +1,183 @@
 import { useState } from 'react'
+import { Box, Chip, Typography } from '@mui/material'
+import { ShieldCheck } from 'lucide-react'
 import {
-  Box,
-  Button,
-  Card,
-  Chip,
-  Typography,
-  TextField,
-  Stack,
-  CircularProgress,
-  Divider,
-  Alert,
-} from '@mui/material'
-import { Target, TrendingUp } from 'lucide-react'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { matchService } from '../../services/matchService'
-import { futureSignalService } from '../../services/futureSignalService'
-import { RiskLevel } from '../../domain/enums'
-import { EmptyState } from '../../components/ui'
+  ReviewFilterBar,
+  ReviewTaskCard,
+  ReviewDetailPanel,
+  ReviewEmptyState,
+} from '../../components/review'
+import { useReviewQueue, useUpdateReviewStatus, useAddReviewNote } from '../../hooks/useReviewQueue'
+import { useSessionStore } from '../../stores/sessionStore'
+import type { ReviewTask, ReviewTaskStatus } from '../../domain/review'
+import type { ReviewFilters } from '../../provider/IReviewProvider'
 
-type ReviewItemType = 'MATCH' | 'SIGNAL'
-
-interface ReviewItem {
-  id: string
-  type: ReviewItemType
-  title: string
-  confidence: number
-  risk?: RiskLevel
-  summary?: string
-  probability?: number
-}
-
-function getPriorityLabel(confidence: number): string {
-  return confidence > 0.8 ? 'Kritisch' : 'Normal'
-}
-
-function getPriorityColor(confidence: number): 'error' | 'primary' {
-  return confidence > 0.8 ? 'error' : 'primary'
-}
-
-function getRiskLabel(risk?: RiskLevel): string {
-  if (!risk) return '–'
-  switch (risk) {
-    case RiskLevel.LOW: return 'Niedrig'
-    case RiskLevel.MEDIUM: return 'Mittel'
-    case RiskLevel.HIGH: return 'Hoch'
-    case RiskLevel.CRITICAL: return 'Kritisch'
-  }
-}
-
-function getRiskColor(risk?: RiskLevel): 'success' | 'warning' | 'error' | 'default' {
-  if (!risk) return 'default'
-  if (risk === RiskLevel.LOW) return 'success'
-  if (risk === RiskLevel.MEDIUM) return 'warning'
-  return 'error'
+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 queryClient = useQueryClient()
-  const [activeItem, setActiveItem] = useState<string | null>(null)
-  const [reviewNotes, setReviewNotes] = useState('')
-  const [approvedIds, setApprovedIds] = useState<Set<string>>(new Set())
-  const [rejectedIds, setRejectedIds] = useState<Set<string>>(new Set())
+  const { currentUser } = useSessionStore()
+  const userRole = currentUser?.role ?? 'REVIEWER'
 
-  const { data: matchResp, isLoading: matchLoading } = useQuery({
-    queryKey: ['matches'],
-    queryFn: () => matchService.getAll(),
-  })
-  const { data: signalResp, isLoading: signalLoading } = useQuery({
-    queryKey: ['futureSignals'],
-    queryFn: () => futureSignalService.getAll(),
-  })
+  const [filters, setFilters] = useState<ReviewFilters>({})
+  const [selectedTask, setSelectedTask] = useState<ReviewTask | null>(null)
 
-  const matches = matchResp?.data ?? []
-  const signals = signalResp?.data ?? []
+  const { data: allTasks = [], isLoading } = useReviewQueue()
+  const updateStatus = useUpdateReviewStatus()
+  const addNote = useAddReviewNote()
 
-  // Review items = matches NOT approved + future signals NOT verified
-  const matchItems: ReviewItem[] = matches
-    .filter(m => !m.isApproved && !approvedIds.has(m.id) && !rejectedIds.has(m.id))
-    .map(m => ({
-      id: m.id,
-      type: 'MATCH' as ReviewItemType,
-      title: `Match: ${m.propertyId} / ${m.needId}`,
-      confidence: m.confidenceLevel,
-      risk: m.riskLevel,
-      summary: m.explainabilitySummary,
-    }))
+  const filtered = filterTasks(allTasks, filters)
 
-  const signalItems: ReviewItem[] = signals
-    .filter(s => !s.isVerified && !approvedIds.has(s.id) && !rejectedIds.has(s.id))
-    .map(s => ({
-      id: s.id,
-      type: 'SIGNAL' as ReviewItemType,
-      title: `${s.signalType}: ${s.locationHint}`,
-      confidence: s.confidenceScore,
-      risk: s.riskLevel,
-      probability: s.probability,
-      summary: s.disclaimer,
-    }))
+  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 allItems = [...matchItems, ...signalItems]
-  const selectedItem = allItems.find(i => i.id === activeItem)
-
-  const isLoading = matchLoading || signalLoading
-
-  const handleApprove = async () => {
-    if (!activeItem) return
-    const item = allItems.find(i => i.id === activeItem)
-    if (item?.type === 'MATCH') {
-      await matchService.approve(activeItem, 'admin@ideal-sharing.ch')
-      await queryClient.invalidateQueries({ queryKey: ['matches'] })
-    } else if (item?.type === 'SIGNAL') {
-      await futureSignalService.verify(activeItem, 'admin@ideal-sharing.ch')
-      await queryClient.invalidateQueries({ queryKey: ['futureSignals'] })
-    }
-    setApprovedIds(prev => new Set([...prev, activeItem]))
-    setActiveItem(null)
-    setReviewNotes('')
+  const handleAction = (status: ReviewTaskStatus) => {
+    if (!selectedTask) return
+    updateStatus.mutate(
+      { id: selectedTask.id, status },
+      {
+        onSuccess: (res) => {
+          setSelectedTask(res.data)
+        },
+      }
+    )
   }
 
-  const handleReject = () => {
-    if (!activeItem) return
-    setRejectedIds(prev => new Set([...prev, activeItem]))
-    setActiveItem(null)
-    setReviewNotes('')
+  const handleAddNote = (content: string) => {
+    if (!selectedTask) return
+    addNote.mutate(
+      { id: selectedTask.id, content },
+      {
+        onSuccess: (res) => {
+          setSelectedTask(res.data)
+        },
+      }
+    )
   }
 
-  if (isLoading) {
+  const handleSelect = (task: ReviewTask) => {
+    setSelectedTask(task)
+  }
+
+  const isSubmitting = updateStatus.isPending || addNote.isPending
+
+  if (!currentUser || !currentUser.allowedWorkspaces.includes('OPERATIONS')) {
     return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 12 }}>
-        <CircularProgress />
+      <Box sx={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 56px)', overflow: 'hidden' }}>
+        <ReviewEmptyState variant="no-permission" />
       </Box>
     )
   }
 
-  const totalPending = matchItems.length + signalItems.length
-
   return (
-    <Box>
-      {/* Page Header */}
-      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
-        <Box>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-            <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
-              Review Queue
-            </Typography>
-            {totalPending > 0 && (
+    <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={totalPending}
+                label={`${pendingCount} Ausstehend`}
                 size="small"
-                sx={{ bgcolor: '#d97706', color: 'white', fontWeight: 700 }}
+                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>
-          <Typography variant="body2" color="text.secondary">
-            Human-in-the-loop Prüfung
-          </Typography>
         </Box>
+        <Typography variant="caption" color="text.secondary">
+          Human-in-the-loop Governance für KI-Outputs, Matches und Datenfehler
+        </Typography>
       </Box>
 
-      <Box sx={{ px: 3, py: 3 }}>
-        {/* Stats row */}
-        <Box className="grid grid-cols-2 gap-4" sx={{ mb: 3 }}>
-          <Card sx={{ p: 2.5 }}>
-            <Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
-              Offene Reviews
-            </Typography>
-            <Typography variant="h3" sx={{ fontWeight: 700, color: totalPending > 0 ? 'warning.main' : 'text.primary' }}>
-              {totalPending}
-            </Typography>
-            <Typography variant="caption" color="text.secondary">
-              Ausstehende Prüfungen
-            </Typography>
-          </Card>
-          <Card sx={{ p: 2.5 }}>
-            <Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
-              Signale zur Prüfung
-            </Typography>
-            <Typography variant="h3" sx={{ fontWeight: 700, color: signalItems.length > 0 ? 'warning.main' : 'text.primary' }}>
-              {signalItems.length}
-            </Typography>
-            <Typography variant="caption" color="text.secondary">
-              Unverifizierte Signale
-            </Typography>
-          </Card>
+      {/* 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>
 
-        {/* Two-column layout */}
-        <Box className="grid grid-cols-2 gap-4" sx={{ alignItems: 'start' }}>
-          {/* Left: Item List */}
-          <Card sx={{ p: 0, overflow: 'hidden' }}>
-            <Box sx={{ px: 2, py: 1.5, borderBottom: '1px solid #f1f5f9' }}>
-              <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
-                Ausstehende Elemente
-              </Typography>
-            </Box>
-
-            {allItems.length === 0 ? (
-              <EmptyState
-                title="Keine ausstehenden Reviews"
-                description="Alle Elemente wurden geprüft."
-              />
-            ) : (
-              <Box>
-                {allItems.map(item => (
-                  <Box
-                    key={item.id}
-                    onClick={() => {
-                      setActiveItem(item.id)
-                      setReviewNotes('')
-                    }}
-                    sx={{
-                      px: 2,
-                      py: 1.5,
-                      cursor: 'pointer',
-                      borderBottom: '1px solid #f8fafc',
-                      bgcolor: activeItem === item.id ? '#eff6ff' : 'white',
-                      '&:hover': { bgcolor: activeItem === item.id ? '#eff6ff' : '#fafafa' },
-                      display: 'flex',
-                      alignItems: 'flex-start',
-                      gap: 1.5,
-                    }}
-                  >
-                    <Box
-                      sx={{
-                        width: 32,
-                        height: 32,
-                        borderRadius: '50%',
-                        bgcolor: item.type === 'MATCH' ? '#eff6ff' : '#faf5ff',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        flexShrink: 0,
-                        mt: 0.25,
-                      }}
-                    >
-                      {item.type === 'MATCH'
-                        ? <Target size={16} color="#1e3a5f" />
-                        : <TrendingUp size={16} color="#7c3aed" />
-                      }
-                    </Box>
-                    <Box sx={{ flex: 1, minWidth: 0 }}>
-                      <Typography variant="body2" sx={{ fontWeight: 500 }} noWrap>
-                        {item.title}
-                      </Typography>
-                      <Stack direction="row" spacing={0.5} sx={{ mt: 0.5, flexWrap: 'wrap' }}>
-                        <Chip
-                          label={getPriorityLabel(item.confidence)}
-                          size="small"
-                          color={getPriorityColor(item.confidence)}
-                          variant="outlined"
-                          sx={{ fontSize: 10 }}
-                        />
-                        <Chip
-                          label="Ausstehend"
-                          size="small"
-                          sx={{ bgcolor: '#fef3c7', color: '#92400e', fontSize: 10 }}
-                        />
-                      </Stack>
-                    </Box>
-                  </Box>
-                ))}
-              </Box>
-            )}
-          </Card>
-
-          {/* Right: Review Panel */}
-          <Card sx={{ p: 0, overflow: 'hidden' }}>
-            {!selectedItem ? (
-              <EmptyState
-                title="Wählen Sie ein Element zur Prüfung"
-                description="Klicken Sie auf ein Element in der Liste, um es zu prüfen."
-              />
-            ) : (
-              <Box>
-                <Box sx={{ px: 2.5, py: 2, borderBottom: '1px solid #f1f5f9' }}>
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
-                    <Chip
-                      label={selectedItem.type === 'MATCH' ? 'Match' : 'Signal'}
-                      size="small"
-                      sx={{
-                        bgcolor: selectedItem.type === 'MATCH' ? '#eff6ff' : '#faf5ff',
-                        color: selectedItem.type === 'MATCH' ? '#1e3a5f' : '#7c3aed',
-                        fontWeight: 600,
-                      }}
-                    />
-                    <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
-                      {selectedItem.title}
-                    </Typography>
-                  </Box>
-                </Box>
-
-                <Box sx={{ px: 2.5, py: 2 }}>
-                  {/* Key facts */}
-                  <Stack spacing={1} sx={{ mb: 2 }}>
-                    <Box sx={{ display: 'flex', gap: 3 }}>
-                      <Box>
-                        <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>Konfidenz</Typography>
-                        <Typography variant="body2" sx={{ fontWeight: 600 }}>
-                          {Math.round(selectedItem.confidence * 100)}%
-                        </Typography>
-                      </Box>
-                      {selectedItem.probability != null && (
-                        <Box>
-                          <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>Wahrscheinlichkeit</Typography>
-                          <Typography variant="body2" sx={{ fontWeight: 600 }}>
-                            {Math.round(selectedItem.probability * 100)}%
-                          </Typography>
-                        </Box>
-                      )}
-                      <Box>
-                        <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>Risiko</Typography>
-                        <Chip label={getRiskLabel(selectedItem.risk)}
-                          size="small"
-                          color={getRiskColor(selectedItem.risk)}
-                          variant="outlined"
-                        />
-                      </Box>
-                    </Box>
-                  </Stack>
-
-                  {selectedItem.summary && (
-                    <Alert severity="info" sx={{ mb: 2, '& .MuiAlert-message': { fontSize: 13 } }}>
-                      {selectedItem.summary}
-                    </Alert>
-                  )}
-
-                  <Divider sx={{ mb: 2 }} />
-
-                  {/* Notes */}
-                  <Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 1 }} color="text.secondary">
-                    Notizen
-                  </Typography>
-                  <TextField
-                    multiline
-                    rows={3}
-                    fullWidth
-                    placeholder="Optionale Anmerkungen zur Entscheidung..."
-                    value={reviewNotes}
-                    onChange={e => setReviewNotes(e.target.value)}
-                    size="small"
-                    sx={{ mb: 2 }}
-                  />
-
-                  {/* Decision buttons */}
-                  <Stack spacing={1}>
-                    <Button
-                      variant="contained"
-                      fullWidth
-                      onClick={handleApprove}
-                      sx={{ bgcolor: '#1a7a4a', '&:hover': { bgcolor: '#155f3a' } }}
-                    >
-                      Genehmigen
-                    </Button>
-                    <Button
-                      variant="outlined"
-                      fullWidth
-                      color="error"
-                      onClick={handleReject}
-                    >
-                      Ablehnen
-                    </Button>
-                    <Button
-                      variant="outlined"
-                      fullWidth
-                      sx={{ color: '#64748b', borderColor: '#e2e8f0' }}
-                    >
-                      Weiterleiten
-                    </Button>
-                  </Stack>
-                </Box>
-              </Box>
-            )}
-          </Card>
+        {/* 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>