feat: F006 supply dashboard — KPI grid, strong matches, data quality, future signals, review tasks
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -1,283 +1,48 @@
|
||||
import { Box, Card, Chip, LinearProgress, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, Typography } from '@mui/material'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { AlertTriangle, BarChart2, Building2, Target } from 'lucide-react'
|
||||
import { SectionContainer, LoadingPage, ErrorState } from '../../components/ui'
|
||||
import { propertyService } from '../../services/propertyService'
|
||||
import { matchService } from '../../services/matchService'
|
||||
import { governanceService } from '../../services/governanceService'
|
||||
import { ResultType, MatchStrength } from '../../domain/enums'
|
||||
import type { ActivityEventType } from '../../services/governanceService'
|
||||
|
||||
function getMatchStrengthColor(strength: MatchStrength): 'success' | 'warning' | 'error' {
|
||||
if (strength === MatchStrength.STRONG) return 'success'
|
||||
if (strength === MatchStrength.MODERATE) return 'warning'
|
||||
return 'error'
|
||||
}
|
||||
|
||||
function getMatchStrengthLabel(strength: MatchStrength): string {
|
||||
if (strength === MatchStrength.STRONG) return 'Stark'
|
||||
if (strength === MatchStrength.MODERATE) return 'Mittel'
|
||||
return 'Schwach'
|
||||
}
|
||||
|
||||
function getEventDescription(type: ActivityEventType): string {
|
||||
switch (type) {
|
||||
case 'PROPERTY_CREATED': return 'hat ein Objekt erstellt'
|
||||
case 'PROPERTY_UPDATED': return 'hat ein Objekt aktualisiert'
|
||||
case 'MATCH_APPROVED': return 'hat einen Match genehmigt'
|
||||
case 'MATCH_REJECTED': return 'hat einen Match abgelehnt'
|
||||
case 'SIGNAL_VERIFIED': return 'hat ein Signal verifiziert'
|
||||
case 'NEED_CREATED': return 'hat einen Bedarf erstellt'
|
||||
case 'REVIEW_REQUESTED': return 'hat eine Überprüfung angefordert'
|
||||
}
|
||||
}
|
||||
|
||||
function getEventColor(type: ActivityEventType): string {
|
||||
switch (type) {
|
||||
case 'PROPERTY_CREATED': return '#1e3a5f'
|
||||
case 'PROPERTY_UPDATED': return '#1e3a5f'
|
||||
case 'MATCH_APPROVED': return '#1a7a4a'
|
||||
case 'MATCH_REJECTED': return '#c0392b'
|
||||
case 'SIGNAL_VERIFIED': return '#7c3aed'
|
||||
case 'NEED_CREATED': return '#d97706'
|
||||
case 'REVIEW_REQUESTED': return '#d97706'
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeAgo(dateStr: string): string {
|
||||
const diff = Date.now() - new Date(dateStr).getTime()
|
||||
const hours = Math.floor(diff / 3600000)
|
||||
const days = Math.floor(hours / 24)
|
||||
if (hours < 1) return 'vor weniger als 1 Stunde'
|
||||
if (hours < 24) return `vor ${hours} Stunde${hours > 1 ? 'n' : ''}`
|
||||
return `vor ${days} Tag${days > 1 ? 'en' : ''}`
|
||||
}
|
||||
import { Box } from '@mui/material'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { PageHeader } from '../../components/layout'
|
||||
import { useSupplyDashboard } from '../../hooks/useSupplyDashboard'
|
||||
import {
|
||||
KpiGrid,
|
||||
StrongMatchOverview,
|
||||
DataQualityWidget,
|
||||
FutureSignalWidget,
|
||||
ReviewTaskWidget,
|
||||
QuickActionPanel,
|
||||
DashboardSkeleton,
|
||||
} from '../../components/supply'
|
||||
|
||||
export default function SupplyDashboard() {
|
||||
const { data: propResp, isLoading: propLoading, error: propError } = useQuery({
|
||||
queryKey: ['properties'],
|
||||
queryFn: () => propertyService.getAll(),
|
||||
})
|
||||
const { data: matchResp, isLoading: matchLoading, error: matchError } = useQuery({
|
||||
queryKey: ['matches'],
|
||||
queryFn: () => matchService.getAll(),
|
||||
})
|
||||
const { data: activityResp, isLoading: activityLoading, error: activityError } = useQuery({
|
||||
queryKey: ['activity', 'org-wincasa'],
|
||||
queryFn: () => governanceService.getActivityLog('org-wincasa'),
|
||||
})
|
||||
const { data, isLoading } = useSupplyDashboard()
|
||||
const navigate = useNavigate()
|
||||
|
||||
if (propLoading || matchLoading || activityLoading) return <LoadingPage />
|
||||
if (propError || matchError || activityError) return <ErrorState />
|
||||
|
||||
const properties = propResp?.data ?? []
|
||||
const matches = matchResp?.data ?? []
|
||||
const activities = activityResp?.data ?? []
|
||||
|
||||
const avgQuality = properties.length
|
||||
? properties.reduce((sum, p) => sum + p.dataQuality.score, 0) / properties.length
|
||||
: 0
|
||||
const pendingReview = properties.filter(p => p.dataQuality.missingCriticalFields.length > 0).length
|
||||
|
||||
const avgQualityColor = avgQuality >= 0.8 ? 'success.main' : avgQuality >= 0.6 ? 'warning.main' : 'error.main'
|
||||
|
||||
const verifiedCount = properties.filter(p => p.resultType === ResultType.VERIFIED_PORTFOLIO).length
|
||||
const marketCount = properties.filter(p => p.resultType === ResultType.EXTERNAL_MARKET).length
|
||||
const futureCount = properties.filter(p => p.resultType === ResultType.FUTURE_AVAILABILITY).length
|
||||
|
||||
const topMatches = [...matches].sort((a, b) => b.matchScore - a.matchScore).slice(0, 3)
|
||||
if (isLoading || !data) return <DashboardSkeleton />
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid', borderColor: 'divider', px: 3, py: 2 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">Supply Dashboard</Typography>
|
||||
<Typography variant="body2" color="text.secondary">Portfolioübersicht und aktuelle Kennzahlen</Typography>
|
||||
<Box sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<PageHeader
|
||||
title="Supply Dashboard"
|
||||
subtitle="Übersicht über Objekte, Matches und Datenqualität"
|
||||
/>
|
||||
<KpiGrid data={data} />
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
|
||||
<StrongMatchOverview
|
||||
matches={data.strongMatches}
|
||||
onNavigate={() => navigate('/supply/match-center')}
|
||||
/>
|
||||
<DataQualityWidget
|
||||
summary={data.dataQuality}
|
||||
onNavigate={() => navigate('/supply/data-quality')}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ px: 3, py: 3 }} className="flex flex-col gap-4">
|
||||
|
||||
{/* Section 1 - KPI Cards */}
|
||||
<Box className="grid grid-cols-4 gap-4">
|
||||
{/* Objekte */}
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Box className="flex flex-col gap-1">
|
||||
<Box className="flex items-center justify-between">
|
||||
<Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4 }}>Objekte</Typography>
|
||||
<Building2 size={20} color="#1e3a5f" />
|
||||
</Box>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700 }} color="text.primary">{properties.length}</Typography>
|
||||
<Typography variant="caption" color="text.secondary">Gesamtportfolio</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Aktive Matches */}
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Box className="flex flex-col gap-1">
|
||||
<Box className="flex items-center justify-between">
|
||||
<Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4 }}>Aktive Matches</Typography>
|
||||
<Target size={20} color="#1a7a4a" />
|
||||
</Box>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700 }} color="text.primary">{matches.length}</Typography>
|
||||
<Typography variant="caption" color="text.secondary">KI-generierte Matches</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Ø Datenqualität */}
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Box className="flex flex-col gap-1">
|
||||
<Box className="flex items-center justify-between">
|
||||
<Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4 }}>Ø Datenqualität</Typography>
|
||||
<BarChart2 size={20} color={avgQuality >= 0.8 ? '#1a7a4a' : avgQuality >= 0.6 ? '#d97706' : '#c0392b'} />
|
||||
</Box>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: avgQualityColor }}>
|
||||
{Math.round(avgQuality * 100)}%
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">Durchschnittlicher Score</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Prüfungen ausstehend */}
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Box className="flex flex-col gap-1">
|
||||
<Box className="flex items-center justify-between">
|
||||
<Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4 }}>Prüfungen ausstehend</Typography>
|
||||
<AlertTriangle size={20} color="#d97706" />
|
||||
</Box>
|
||||
<Typography variant="h3" sx={{ fontWeight: 700, color: pendingReview > 0 ? 'warning.main' : 'text.primary' }}>
|
||||
{pendingReview}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">Kritische Felder fehlen</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Section 2 - Portfolio Overview */}
|
||||
<Box className="grid grid-cols-3 gap-4">
|
||||
<Card sx={{ elevation: 1, borderTop: '4px solid #1e3a5f', p: 2.5 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700 }} color="text.primary">{verifiedCount}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">Verified Portfolio</Typography>
|
||||
</Card>
|
||||
<Card sx={{ elevation: 1, borderTop: '4px solid #d97706', p: 2.5 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700 }} color="text.primary">{marketCount}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">Marktinserate</Typography>
|
||||
</Card>
|
||||
<Card sx={{ elevation: 1, borderTop: '4px solid #7c3aed', p: 2.5 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: 700 }} color="text.primary">{futureCount}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">Zukunftssignale</Typography>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Section 3 - Recent Matches */}
|
||||
<SectionContainer title="Aktuelle Matches">
|
||||
<Card sx={{ elevation: 1 }}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow sx={{ bgcolor: 'grey.50' }}>
|
||||
<TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Objekt</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Unternehmen</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Score</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Stärke</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Aktion</Typography></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{topMatches.map(match => {
|
||||
const property = properties.find(p => p.id === match.propertyId)
|
||||
return (
|
||||
<TableRow key={match.id} hover>
|
||||
<TableCell>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500 }}>{property?.title ?? match.propertyId}</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography variant="body2" color="text.secondary">{match.needId}</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Box className="flex items-center gap-2">
|
||||
<Typography variant="body2" sx={{ fontWeight: 700 }}>{match.matchScore}</Typography>
|
||||
<Box sx={{ width: 80 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={match.matchScore}
|
||||
sx={{ color: match.matchStrength === MatchStrength.STRONG ? 'success' : match.matchStrength === MatchStrength.MODERATE ? 'warning' : 'error' }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={getMatchStrengthLabel(match.matchStrength)}
|
||||
sx={{ color: getMatchStrengthColor(match.matchStrength) }}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Tooltip title="Details-Seite in Entwicklung">
|
||||
<span>
|
||||
<button
|
||||
disabled
|
||||
style={{
|
||||
padding: '4px 12px',
|
||||
border: '1px solid rgba(0,0,0,0.23)',
|
||||
borderRadius: 4,
|
||||
background: 'transparent',
|
||||
cursor: 'not-allowed',
|
||||
opacity: 0.5,
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
Details
|
||||
</button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
</SectionContainer>
|
||||
|
||||
{/* Section 4 - Activity Log */}
|
||||
<SectionContainer title="Aktivitäten">
|
||||
<Card sx={{ elevation: 1, p: 2 }}>
|
||||
<Box className="flex flex-col gap-3">
|
||||
{activities.slice(0, 5).map(event => (
|
||||
<Box key={event.id} className="flex items-center gap-3">
|
||||
<Box
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
bgcolor: getEventColor(event.type),
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Building2 size={14} color="white" />
|
||||
</Box>
|
||||
<Box className="flex-1">
|
||||
<Typography variant="body2">
|
||||
<strong>{event.performedBy}</strong> {getEventDescription(event.type)}
|
||||
</Typography>
|
||||
{event.notes && (
|
||||
<Typography variant="caption" color="text.secondary">{event.notes}</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>
|
||||
{formatTimeAgo(event.createdAt)}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Card>
|
||||
</SectionContainer>
|
||||
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
|
||||
<FutureSignalWidget summary={data.futureSignals} />
|
||||
<ReviewTaskWidget
|
||||
tasks={data.reviewTasks}
|
||||
onNavigate={() => navigate('/ops/review-queue')}
|
||||
/>
|
||||
</Box>
|
||||
<QuickActionPanel />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user