feat: F006 supply dashboard — KPI grid, strong matches, data quality, future signals, review tasks

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

src/components/supply/DashboardHeader.tsx

@@ -0,0 +1,48 @@
+import { Box, Button, Chip, Typography } from '@mui/material'
+import { useNavigate } from 'react-router'
+
+interface DashboardHeaderProps {
+  orgName?: string
+  lastUpdated?: string
+}
+
+function formatLastUpdated(iso: string): string {
+  try {
+    return new Intl.DateTimeFormat('de-CH', {
+      dateStyle: 'short',
+      timeStyle: 'short',
+    }).format(new Date(iso))
+  } catch {
+    return iso
+  }
+}
+
+export function DashboardHeader({ orgName = 'Demo Organisation', lastUpdated }: DashboardHeaderProps) {
+  const navigate = useNavigate()
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+      <Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+          <Typography variant="h6" sx={{ fontWeight: 600 }}>
+            {orgName}
+          </Typography>
+          <Chip label="Demo" size="small" color="info" variant="outlined" />
+        </Box>
+        {lastUpdated && (
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            Zuletzt aktualisiert: {formatLastUpdated(lastUpdated)}
+          </Typography>
+        )}
+      </Box>
+      <Box sx={{ display: 'flex', gap: 1 }}>
+        <Button variant="contained" size="small" onClick={() => navigate('/supply/match-center')}>
+          Match Center
+        </Button>
+        <Button variant="outlined" size="small" onClick={() => navigate('/supply/data-quality')}>
+          Datenqualität
+        </Button>
+      </Box>
+    </Box>
+  )
+}

src/components/supply/DashboardSkeleton.tsx

@@ -0,0 +1,67 @@
+import { Box, Card, CardContent, Skeleton } from '@mui/material'
+
+function SkeletonCard() {
+  return (
+    <Card>
+      <CardContent sx={{ p: 2.5 }}>
+        <Skeleton variant="text" width="60%" height={20} />
+        <Skeleton variant="text" width="40%" height={40} sx={{ mt: 1 }} />
+      </CardContent>
+    </Card>
+  )
+}
+
+function SkeletonLargeCard() {
+  return (
+    <Card>
+      <CardContent sx={{ p: 2.5 }}>
+        <Skeleton variant="text" width="50%" height={28} sx={{ mb: 2 }} />
+        <Skeleton variant="rectangular" height={120} sx={{ borderRadius: 1, mb: 1 }} />
+        <Skeleton variant="rectangular" height={80} sx={{ borderRadius: 1 }} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export function DashboardSkeleton() {
+  return (
+    <Box sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 3 }}>
+      {/* Header skeleton */}
+      <Box sx={{ pb: 2 }}>
+        <Skeleton variant="text" width={240} height={32} />
+        <Skeleton variant="text" width={360} height={20} sx={{ mt: 0.5 }} />
+      </Box>
+
+      {/* KPI grid skeleton */}
+      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
+        {Array.from({ length: 6 }).map((_, i) => (
+          <SkeletonCard key={i} />
+        ))}
+      </Box>
+
+      {/* Row 2 */}
+      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
+        <SkeletonLargeCard />
+        <SkeletonLargeCard />
+      </Box>
+
+      {/* Row 3 */}
+      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
+        <SkeletonLargeCard />
+        <SkeletonLargeCard />
+      </Box>
+
+      {/* Quick actions skeleton */}
+      <Card>
+        <CardContent sx={{ p: 2.5 }}>
+          <Skeleton variant="text" width="30%" height={28} sx={{ mb: 2 }} />
+          <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1.5 }}>
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton key={i} variant="rectangular" height={36} sx={{ borderRadius: 1 }} />
+            ))}
+          </Box>
+        </CardContent>
+      </Card>
+    </Box>
+  )
+}

src/components/supply/DataQualityWidget.tsx

@@ -0,0 +1,81 @@
+import { Box, Button, Card, CardContent, Chip, LinearProgress, Typography } from '@mui/material'
+import type { DataQualitySummary } from '../../domain/dashboard'
+
+interface DataQualityWidgetProps {
+  summary: DataQualitySummary
+  onNavigate: () => void
+}
+
+function qualityColor(score: number): 'success' | 'warning' | 'error' {
+  if (score >= 80) return 'success'
+  if (score >= 60) return 'warning'
+  return 'error'
+}
+
+export function DataQualityWidget({ summary, onNavigate }: DataQualityWidgetProps) {
+  const color = qualityColor(summary.avgScore)
+
+  return (
+    <Card>
+      <CardContent sx={{ p: 2.5 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <Typography variant="h6" sx={{ fontWeight: 600 }}>
+            Datenqualität
+          </Typography>
+          <Button size="small" onClick={onNavigate}>
+            Details
+          </Button>
+        </Box>
+
+        <Box sx={{ mb: 2 }}>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              Ø Score
+            </Typography>
+            <Typography variant="body2" sx={{ fontWeight: 600 }}>
+              {summary.avgScore}%
+            </Typography>
+          </Box>
+          <LinearProgress
+            variant="determinate"
+            value={summary.avgScore}
+            color={color}
+            sx={{ borderRadius: 1, height: 8 }}
+          />
+        </Box>
+
+        <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+          <Box>
+            <Typography variant="h5" sx={{ fontWeight: 700, color: summary.critical > 0 ? 'error.main' : 'text.primary' }}>
+              {summary.critical}
+            </Typography>
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              Kritische Objekte
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="h5" sx={{ fontWeight: 700 }}>
+              {summary.propertiesWithMissingCritical}
+            </Typography>
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              Fehlende Pflichtfelder
+            </Typography>
+          </Box>
+        </Box>
+
+        {summary.topMissingFields.length > 0 && (
+          <Box>
+            <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mb: 0.5 }}>
+              Häufig fehlende Felder:
+            </Typography>
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+              {summary.topMissingFields.map(field => (
+                <Chip key={field} label={field} size="small" color="warning" variant="outlined" />
+              ))}
+            </Box>
+          </Box>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/supply/FutureSignalWidget.tsx

@@ -0,0 +1,72 @@
+import { Box, Card, CardContent, Divider, Typography } from '@mui/material'
+import type { FutureSignalSummary } from '../../domain/dashboard'
+
+interface FutureSignalWidgetProps {
+  summary: FutureSignalSummary
+}
+
+interface StatItemProps {
+  label: string
+  value: number | string
+  highlight?: boolean
+}
+
+function StatItem({ label, value, highlight }: StatItemProps) {
+  return (
+    <Box sx={{ textAlign: 'center' }}>
+      <Typography
+        variant="h5"
+        sx={{ fontWeight: 700, color: highlight ? 'primary.main' : 'text.primary' }}
+      >
+        {value}
+      </Typography>
+      <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+        {label}
+      </Typography>
+    </Box>
+  )
+}
+
+export function FutureSignalWidget({ summary }: FutureSignalWidgetProps) {
+  return (
+    <Card>
+      <CardContent sx={{ p: 2.5 }}>
+        <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
+          Marktsignale
+        </Typography>
+
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gap: 2,
+            mb: 2,
+          }}
+        >
+          <StatItem label="Gesamt" value={summary.total} />
+          <StatItem label="Hohe Konfidenz" value={summary.highConfidence} highlight />
+          <StatItem label="Zu prüfen" value={summary.needsReview} />
+          <StatItem
+            label="Ø Zeithorizont (Monate)"
+            value={summary.avgTimeHorizonMonths}
+          />
+        </Box>
+
+        {summary.restricted > 0 && (
+          <>
+            <Divider sx={{ my: 1.5 }} />
+            <Typography variant="caption" sx={{ color: 'warning.main', display: 'block' }}>
+              {summary.restricted} vertrauliche Signale — nur für berechtigte Nutzer sichtbar.
+            </Typography>
+          </>
+        )}
+
+        <Divider sx={{ my: 1.5 }} />
+        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
+          Marktsignale basieren auf AI-Analyse öffentlicher und interner Daten. Es handelt
+          sich um probabilistische Einschätzungen, keine bestätigten Objekte.
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}

src/components/supply/KpiCard.tsx

@@ -0,0 +1,40 @@
+import { Card, CardContent, Chip, Typography } from '@mui/material'
+import type { KpiCardData } from '../../domain/dashboard'
+
+interface KpiCardProps {
+  card: KpiCardData
+}
+
+export function KpiCard({ card }: KpiCardProps) {
+  const trendColor =
+    card.trend === 'up' ? 'success' : card.trend === 'down' ? 'error' : 'default'
+
+  return (
+    <Card
+      sx={{
+        borderTop: card.accent ? `4px solid ${card.accent}` : '4px solid transparent',
+        height: '100%',
+      }}
+    >
+      <CardContent sx={{ p: 2.5 }}>
+        <Typography
+          variant="overline"
+          sx={{ color: 'text.secondary', lineHeight: 1.4, display: 'block' }}
+        >
+          {card.label}
+        </Typography>
+        <Typography variant="h4" sx={{ fontWeight: 700, mt: 0.5, mb: 0.5 }}>
+          {card.value}
+        </Typography>
+        {card.trendLabel && (
+          <Chip
+            label={card.trendLabel}
+            size="small"
+            color={trendColor as 'success' | 'error' | 'default'}
+            sx={{ mt: 0.5 }}
+          />
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/supply/KpiGrid.tsx

@@ -0,0 +1,69 @@
+import { Box } from '@mui/material'
+import type { DashboardData, KpiCardData } from '../../domain/dashboard'
+import { KpiCard } from './KpiCard'
+
+interface KpiGridProps {
+  data: DashboardData
+}
+
+export function KpiGrid({ data }: KpiGridProps) {
+  const pendingCount = data.reviewTasks.filter(t => t.status === 'PENDING').length
+
+  const qualityColor =
+    data.avgDataQuality >= 80
+      ? '#1a7a4a'
+      : data.avgDataQuality >= 60
+        ? '#d97706'
+        : '#c0392b'
+
+  const cards: KpiCardData[] = [
+    {
+      id: 'active-properties',
+      label: 'Aktive Objekte',
+      value: `${data.activeProperties} / ${data.totalProperties}`,
+    },
+    {
+      id: 'strong-matches',
+      label: 'Starke Matches',
+      value: data.strongMatchCount,
+      accent: '#1a7a4a',
+    },
+    {
+      id: 'avg-quality',
+      label: 'Ø Datenqualität',
+      value: `${data.avgDataQuality}%`,
+      accent: qualityColor,
+    },
+    {
+      id: 'market-signals',
+      label: 'Marktsignale',
+      value: data.futureSignals.total,
+    },
+    {
+      id: 'review-pending',
+      label: 'Review ausstehend',
+      value: pendingCount,
+      accent: pendingCount > 0 ? '#d97706' : undefined,
+    },
+    {
+      id: 'critical-gaps',
+      label: 'Kritische Datenlücken',
+      value: data.dataQuality.critical,
+      accent: data.dataQuality.critical > 0 ? '#c0392b' : undefined,
+    },
+  ]
+
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: 2,
+      }}
+    >
+      {cards.map(card => (
+        <KpiCard key={card.id} card={card} />
+      ))}
+    </Box>
+  )
+}

src/components/supply/QuickActionPanel.tsx

@@ -0,0 +1,43 @@
+import { Box, Button, Card, CardContent, Typography } from '@mui/material'
+import { useNavigate } from 'react-router'
+
+const ACTIONS = [
+  { label: 'Objekte verwalten', path: '/supply/properties' },
+  { label: 'Match Center', path: '/supply/match-center' },
+  { label: 'Marktchancen', path: '/supply/future-availability' },
+  { label: 'Datenqualität', path: '/supply/data-quality' },
+  { label: 'Review Queue', path: '/ops/review-queue' },
+  { label: 'Market Intelligence', path: '/ops/market-intelligence' },
+] as const
+
+export function QuickActionPanel() {
+  const navigate = useNavigate()
+
+  return (
+    <Card>
+      <CardContent sx={{ p: 2.5 }}>
+        <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
+          Schnellzugriff
+        </Typography>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: 1.5,
+          }}
+        >
+          {ACTIONS.map(action => (
+            <Button
+              key={action.path}
+              variant="outlined"
+              onClick={() => navigate(action.path)}
+              sx={{ justifyContent: 'flex-start', textTransform: 'none' }}
+            >
+              {action.label}
+            </Button>
+          ))}
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}

src/components/supply/ReviewTaskWidget.tsx

@@ -0,0 +1,95 @@
+import { Box, Button, Card, CardContent, Chip, Typography } from '@mui/material'
+import type { DashboardReviewTask } from '../../domain/dashboard'
+
+interface ReviewTaskWidgetProps {
+  tasks: DashboardReviewTask[]
+  onNavigate: () => void
+}
+
+const PRIORITY_LABELS: Record<string, string> = {
+  HIGH: 'Hoch',
+  MEDIUM: 'Mittel',
+  LOW: 'Niedrig',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  PENDING: 'Ausstehend',
+  IN_REVIEW: 'In Bearbeitung',
+  COMPLETED: 'Abgeschlossen',
+}
+
+function priorityColor(priority: string): 'error' | 'warning' | 'default' {
+  if (priority === 'HIGH') return 'error'
+  if (priority === 'MEDIUM') return 'warning'
+  return 'default'
+}
+
+function statusColor(status: string): 'warning' | 'info' | 'success' | 'default' {
+  if (status === 'PENDING') return 'warning'
+  if (status === 'IN_REVIEW') return 'info'
+  if (status === 'COMPLETED') return 'success'
+  return 'default'
+}
+
+const PRIORITY_ORDER: Record<string, number> = { HIGH: 0, MEDIUM: 1, LOW: 2 }
+
+export function ReviewTaskWidget({ tasks, onNavigate }: ReviewTaskWidgetProps) {
+  const sorted = [...tasks].sort(
+    (a, b) => (PRIORITY_ORDER[a.priority] ?? 9) - (PRIORITY_ORDER[b.priority] ?? 9),
+  )
+
+  return (
+    <Card>
+      <CardContent sx={{ p: 2.5 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <Typography variant="h6" sx={{ fontWeight: 600 }}>
+            Review Queue
+          </Typography>
+          <Button size="small" onClick={onNavigate}>
+            Alle anzeigen
+          </Button>
+        </Box>
+
+        {sorted.length === 0 ? (
+          <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center', py: 2 }}>
+            Keine offenen Aufgaben.
+          </Typography>
+        ) : (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            {sorted.map(task => (
+              <Box
+                key={task.id}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 1,
+                  py: 0.75,
+                  borderBottom: '1px solid',
+                  borderColor: 'divider',
+                  '&:last-child': { borderBottom: 'none' },
+                }}
+              >
+                <Chip
+                  label={PRIORITY_LABELS[task.priority] ?? task.priority}
+                  size="small"
+                  color={priorityColor(task.priority)}
+                  sx={{ flexShrink: 0 }}
+                />
+                <Typography variant="body2" sx={{ flex: 1 }}>
+                  {task.title}
+                </Typography>
+                <Chip
+                  label={STATUS_LABELS[task.status] ?? task.status}
+                  size="small"
+                  color={statusColor(task.status)}
+                  variant="outlined"
+                  sx={{ flexShrink: 0 }}
+                />
+              </Box>
+            ))}
+          </Box>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/supply/StrongMatchMiniCard.tsx

@@ -0,0 +1,59 @@
+import { Box, Card, CardContent, Chip, Typography } from '@mui/material'
+import type { StrongMatchItem } from '../../domain/dashboard'
+
+interface StrongMatchMiniCardProps {
+  match: StrongMatchItem
+}
+
+function scoreColor(score: number): string {
+  if (score >= 80) return '#1a7a4a'
+  if (score >= 60) return '#d97706'
+  return '#c0392b'
+}
+
+export function StrongMatchMiniCard({ match }: StrongMatchMiniCardProps) {
+  return (
+    <Card variant="outlined" sx={{ mb: 1 }}>
+      <CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 0.5 }}>
+          <Typography variant="body2" sx={{ fontWeight: 600, flex: 1 }}>
+            {match.propertyTitle}
+          </Typography>
+          <Chip
+            label={`${match.matchScore}`}
+            size="small"
+            sx={{
+              ml: 1,
+              fontWeight: 700,
+              bgcolor: scoreColor(match.matchScore),
+              color: 'white',
+              flexShrink: 0,
+            }}
+          />
+        </Box>
+        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
+          {match.propertyAddress}
+        </Typography>
+        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mt: 0.5 }}>
+          {match.topReason}
+        </Typography>
+        <Box sx={{ display: 'flex', gap: 1, mt: 1, flexWrap: 'wrap' }}>
+          {match.missingDataCount > 0 && (
+            <Chip
+              label={`${match.missingDataCount} Felder fehlen`}
+              size="small"
+              color="warning"
+            />
+          )}
+          {match.nextBestAction !== '–' && (
+            <Chip
+              label={match.nextBestAction}
+              size="small"
+              variant="outlined"
+            />
+          )}
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}

src/components/supply/StrongMatchOverview.tsx

@@ -0,0 +1,35 @@
+import { Box, Button, Card, CardContent, Typography } from '@mui/material'
+import type { StrongMatchItem } from '../../domain/dashboard'
+import { StrongMatchMiniCard } from './StrongMatchMiniCard'
+
+interface StrongMatchOverviewProps {
+  matches: StrongMatchItem[]
+  onNavigate: () => void
+}
+
+export function StrongMatchOverview({ matches, onNavigate }: StrongMatchOverviewProps) {
+  return (
+    <Card>
+      <CardContent sx={{ p: 2.5 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <Typography variant="h6" sx={{ fontWeight: 600 }}>
+            Starke Matches
+          </Typography>
+          <Button size="small" onClick={onNavigate}>
+            Alle anzeigen
+          </Button>
+        </Box>
+
+        {matches.length === 0 ? (
+          <Typography variant="body2" sx={{ color: 'text.secondary', py: 2, textAlign: 'center' }}>
+            Keine starken Matches vorhanden.
+          </Typography>
+        ) : (
+          matches.slice(0, 5).map(m => (
+            <StrongMatchMiniCard key={m.matchId} match={m} />
+          ))
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/supply/index.ts

@@ -0,0 +1,10 @@
+export { KpiCard } from './KpiCard'
+export { KpiGrid } from './KpiGrid'
+export { StrongMatchMiniCard } from './StrongMatchMiniCard'
+export { StrongMatchOverview } from './StrongMatchOverview'
+export { DataQualityWidget } from './DataQualityWidget'
+export { FutureSignalWidget } from './FutureSignalWidget'
+export { ReviewTaskWidget } from './ReviewTaskWidget'
+export { QuickActionPanel } from './QuickActionPanel'
+export { DashboardSkeleton } from './DashboardSkeleton'
+export { DashboardHeader } from './DashboardHeader'