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
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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'
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
export interface KpiCardData {
|
||||||
|
id: string
|
||||||
|
label: string
|
||||||
|
value: number | string
|
||||||
|
trend?: 'up' | 'down' | 'neutral'
|
||||||
|
trendLabel?: string
|
||||||
|
accent?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StrongMatchItem {
|
||||||
|
matchId: string
|
||||||
|
propertyId: string
|
||||||
|
propertyTitle: string
|
||||||
|
propertyAddress: string
|
||||||
|
needSummary: string
|
||||||
|
matchScore: number
|
||||||
|
topReason: string
|
||||||
|
missingDataCount: number
|
||||||
|
nextBestAction: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FutureSignalSummary {
|
||||||
|
total: number
|
||||||
|
highConfidence: number
|
||||||
|
restricted: number
|
||||||
|
needsReview: number
|
||||||
|
avgTimeHorizonMonths: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DataQualitySummary {
|
||||||
|
avgScore: number
|
||||||
|
critical: number
|
||||||
|
propertiesWithMissingCritical: number
|
||||||
|
topMissingFields: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardReviewTask {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
priority: 'HIGH' | 'MEDIUM' | 'LOW'
|
||||||
|
status: string
|
||||||
|
type: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardData {
|
||||||
|
totalProperties: number
|
||||||
|
activeProperties: number
|
||||||
|
strongMatchCount: number
|
||||||
|
avgDataQuality: number
|
||||||
|
futureSignals: FutureSignalSummary
|
||||||
|
dataQuality: DataQualitySummary
|
||||||
|
reviewTasks: DashboardReviewTask[]
|
||||||
|
strongMatches: StrongMatchItem[]
|
||||||
|
lastUpdated: string
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import { dashboardService } from '../services/dashboardService'
|
||||||
|
import type { DashboardData } from '../domain/dashboard'
|
||||||
|
|
||||||
|
export function useSupplyDashboard() {
|
||||||
|
return useQuery<DashboardData>({
|
||||||
|
queryKey: ['supply', 'dashboard'],
|
||||||
|
queryFn: () => dashboardService.getDashboardData(),
|
||||||
|
staleTime: 30_000,
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -1,283 +1,48 @@
|
|||||||
import { Box, Card, Chip, LinearProgress, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, Typography } from '@mui/material'
|
import { Box } from '@mui/material'
|
||||||
import { useQuery } from '@tanstack/react-query'
|
import { useNavigate } from 'react-router'
|
||||||
import { AlertTriangle, BarChart2, Building2, Target } from 'lucide-react'
|
import { PageHeader } from '../../components/layout'
|
||||||
import { SectionContainer, LoadingPage, ErrorState } from '../../components/ui'
|
import { useSupplyDashboard } from '../../hooks/useSupplyDashboard'
|
||||||
import { propertyService } from '../../services/propertyService'
|
import {
|
||||||
import { matchService } from '../../services/matchService'
|
KpiGrid,
|
||||||
import { governanceService } from '../../services/governanceService'
|
StrongMatchOverview,
|
||||||
import { ResultType, MatchStrength } from '../../domain/enums'
|
DataQualityWidget,
|
||||||
import type { ActivityEventType } from '../../services/governanceService'
|
FutureSignalWidget,
|
||||||
|
ReviewTaskWidget,
|
||||||
function getMatchStrengthColor(strength: MatchStrength): 'success' | 'warning' | 'error' {
|
QuickActionPanel,
|
||||||
if (strength === MatchStrength.STRONG) return 'success'
|
DashboardSkeleton,
|
||||||
if (strength === MatchStrength.MODERATE) return 'warning'
|
} from '../../components/supply'
|
||||||
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' : ''}`
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function SupplyDashboard() {
|
export default function SupplyDashboard() {
|
||||||
const { data: propResp, isLoading: propLoading, error: propError } = useQuery({
|
const { data, isLoading } = useSupplyDashboard()
|
||||||
queryKey: ['properties'],
|
const navigate = useNavigate()
|
||||||
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'),
|
|
||||||
})
|
|
||||||
|
|
||||||
if (propLoading || matchLoading || activityLoading) return <LoadingPage />
|
if (isLoading || !data) return <DashboardSkeleton />
|
||||||
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)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||||
{/* Page Header */}
|
<PageHeader
|
||||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid', borderColor: 'divider', px: 3, py: 2 }}>
|
title="Supply Dashboard"
|
||||||
<Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">Supply Dashboard</Typography>
|
subtitle="Übersicht über Objekte, Matches und Datenqualität"
|
||||||
<Typography variant="body2" color="text.secondary">Portfolioübersicht und aktuelle Kennzahlen</Typography>
|
/>
|
||||||
</Box>
|
<KpiGrid data={data} />
|
||||||
|
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
|
||||||
{/* Content */}
|
<StrongMatchOverview
|
||||||
<Box sx={{ px: 3, py: 3 }} className="flex flex-col gap-4">
|
matches={data.strongMatches}
|
||||||
|
onNavigate={() => navigate('/supply/match-center')}
|
||||||
{/* Section 1 - KPI Cards */}
|
/>
|
||||||
<Box className="grid grid-cols-4 gap-4">
|
<DataQualityWidget
|
||||||
{/* Objekte */}
|
summary={data.dataQuality}
|
||||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
onNavigate={() => navigate('/supply/data-quality')}
|
||||||
<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>
|
||||||
</Box>
|
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
|
||||||
</TableCell>
|
<FutureSignalWidget summary={data.futureSignals} />
|
||||||
<TableCell>
|
<ReviewTaskWidget
|
||||||
<Chip
|
tasks={data.reviewTasks}
|
||||||
label={getMatchStrengthLabel(match.matchStrength)}
|
onNavigate={() => navigate('/ops/review-queue')}
|
||||||
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>
|
</Box>
|
||||||
|
<QuickActionPanel />
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,115 @@
|
|||||||
import { MockupDashboardProvider } from '../provider/MockupDashboardProvider'
|
import { MockupPropertyProvider } from '../provider/MockupPropertyProvider'
|
||||||
import type { DashboardStats } from '../provider/IDashboardProvider'
|
import { MockupMatchProvider } from '../provider/MockupMatchProvider'
|
||||||
import type { ItemResponse } from './types'
|
import { MockupFutureSignalProvider } from '../provider/MockupFutureSignalProvider'
|
||||||
|
import { MockupReviewProvider } from '../provider/MockupReviewProvider'
|
||||||
|
import type {
|
||||||
|
DashboardData,
|
||||||
|
StrongMatchItem,
|
||||||
|
DashboardReviewTask,
|
||||||
|
} from '../domain/dashboard'
|
||||||
|
|
||||||
const provider = MockupDashboardProvider
|
const ACTIVE_STATUSES = ['AVAILABLE_NOW', 'AVAILABLE_SOON'] as const
|
||||||
|
|
||||||
|
function isActiveStatus(s: string): s is typeof ACTIVE_STATUSES[number] {
|
||||||
|
return (ACTIVE_STATUSES as readonly string[]).includes(s)
|
||||||
|
}
|
||||||
|
|
||||||
export const dashboardService = {
|
export const dashboardService = {
|
||||||
async getStats(organizationId?: string): Promise<ItemResponse<DashboardStats>> {
|
async getDashboardData(): Promise<DashboardData> {
|
||||||
const data = await provider.getStats(organizationId)
|
const [properties, matches, signals, reviewItems] = await Promise.all([
|
||||||
return { data }
|
MockupPropertyProvider.getAll(),
|
||||||
|
MockupMatchProvider.getAll(),
|
||||||
|
MockupFutureSignalProvider.getAll(),
|
||||||
|
MockupReviewProvider.getQueue(),
|
||||||
|
])
|
||||||
|
|
||||||
|
const activeProperties = properties.filter(p =>
|
||||||
|
isActiveStatus(p.availabilityStatus),
|
||||||
|
)
|
||||||
|
|
||||||
|
const strongMatches: StrongMatchItem[] = matches
|
||||||
|
.filter(m => m.matchScore >= 80)
|
||||||
|
.slice(0, 5)
|
||||||
|
.map(m => {
|
||||||
|
const prop = properties.find(p => p.id === m.propertyId)
|
||||||
|
const topFactor = m.positiveFactors[0]
|
||||||
|
const firstAction = m.nextBestActions?.[0]
|
||||||
|
return {
|
||||||
|
matchId: m.id,
|
||||||
|
propertyId: m.propertyId,
|
||||||
|
propertyTitle: prop?.title ?? 'Unbekanntes Objekt',
|
||||||
|
propertyAddress: prop?.address?.street
|
||||||
|
? `${prop.address.street} ${prop.address.houseNumber}, ${prop.address.city}`
|
||||||
|
: '–',
|
||||||
|
needSummary: m.needId,
|
||||||
|
matchScore: m.matchScore,
|
||||||
|
topReason: topFactor?.explanation ?? topFactor?.criterion ?? '–',
|
||||||
|
missingDataCount: m.missingData?.length ?? 0,
|
||||||
|
nextBestAction: firstAction?.label ?? '–',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const avgQualityRaw =
|
||||||
|
properties.length > 0
|
||||||
|
? properties.reduce((sum, p) => sum + (p.dataQuality?.score ?? 0), 0) /
|
||||||
|
properties.length
|
||||||
|
: 0
|
||||||
|
const avgQuality = Math.round(avgQualityRaw * 100)
|
||||||
|
|
||||||
|
const fieldCounts = properties
|
||||||
|
.flatMap(p => p.dataQuality?.missingCriticalFields ?? [])
|
||||||
|
.reduce<Record<string, number>>((acc, f) => {
|
||||||
|
acc[f] = (acc[f] ?? 0) + 1
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
|
||||||
|
const topMissing = Object.entries(fieldCounts)
|
||||||
|
.sort((a, b) => b[1] - a[1])
|
||||||
|
.slice(0, 5)
|
||||||
|
.map(([f]) => f)
|
||||||
|
|
||||||
|
const highConfidenceSignals = signals.filter(s => s.confidenceScore >= 0.75)
|
||||||
|
const restrictedSignals = signals.filter(
|
||||||
|
s => s.sensitivityLevel === 'CONFIDENTIAL' || s.sensitivityLevel === 'INTERNAL',
|
||||||
|
)
|
||||||
|
|
||||||
|
const reviewTasks: DashboardReviewTask[] = reviewItems.slice(0, 8).map(r => ({
|
||||||
|
id: r.id,
|
||||||
|
title: `Match ${r.matchId} – Objekt ${r.propertyId}`,
|
||||||
|
priority: r.priority as 'HIGH' | 'MEDIUM' | 'LOW',
|
||||||
|
status: r.status,
|
||||||
|
type: 'REVIEW',
|
||||||
|
}))
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalProperties: properties.length,
|
||||||
|
activeProperties: activeProperties.length,
|
||||||
|
strongMatchCount: matches.filter(m => m.matchScore >= 80).length,
|
||||||
|
avgDataQuality: avgQuality,
|
||||||
|
futureSignals: {
|
||||||
|
total: signals.length,
|
||||||
|
highConfidence: highConfidenceSignals.length,
|
||||||
|
restricted: restrictedSignals.length,
|
||||||
|
needsReview: signals.filter(s => !s.isVerified).length,
|
||||||
|
avgTimeHorizonMonths:
|
||||||
|
signals.length > 0
|
||||||
|
? Math.round(
|
||||||
|
signals.reduce((sum, s) => sum + (s.timeHorizonMonths ?? 0), 0) /
|
||||||
|
signals.length,
|
||||||
|
)
|
||||||
|
: 0,
|
||||||
|
},
|
||||||
|
dataQuality: {
|
||||||
|
avgScore: avgQuality,
|
||||||
|
critical: properties.filter(p => (p.dataQuality?.score ?? 0) < 0.5).length,
|
||||||
|
propertiesWithMissingCritical: properties.filter(
|
||||||
|
p => (p.dataQuality?.missingCriticalFields?.length ?? 0) > 0,
|
||||||
|
).length,
|
||||||
|
topMissingFields: topMissing,
|
||||||
|
},
|
||||||
|
reviewTasks,
|
||||||
|
strongMatches,
|
||||||
|
lastUpdated: new Date().toISOString(),
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user