Initial commit
This commit is contained in:
Benjamin Sutter
@@ -0,0 +1,309 @@
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Card,
|
||||
Chip,
|
||||
LinearProgress,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from '@mui/material'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { ErrorState, LoadingPage, SectionContainer } from '../../components/ui'
|
||||
import { propertyService } from '../../services/propertyService'
|
||||
import { DataFreshness, ResultType } from '../../domain/enums'
|
||||
|
||||
function getResultTypeLabel(type: ResultType): string {
|
||||
switch (type) {
|
||||
case ResultType.VERIFIED_PORTFOLIO: return 'Verified Portfolio'
|
||||
case ResultType.EXTERNAL_MARKET: return 'Marktinserat'
|
||||
case ResultType.FUTURE_AVAILABILITY: return 'Zukunftssignal'
|
||||
}
|
||||
}
|
||||
|
||||
function getQualityColor(score: number): 'success' | 'warning' | 'error' {
|
||||
if (score >= 0.8) return 'success'
|
||||
if (score >= 0.6) return 'warning'
|
||||
return 'error'
|
||||
}
|
||||
|
||||
function getFreshnessLabel(freshness: DataFreshness): string {
|
||||
switch (freshness) {
|
||||
case DataFreshness.FRESH: return 'Aktuell'
|
||||
case DataFreshness.STALE: return 'Veraltet'
|
||||
case DataFreshness.OUTDATED: return 'Abgelaufen'
|
||||
}
|
||||
}
|
||||
|
||||
function getFreshnessColor(freshness: DataFreshness): 'success' | 'warning' | 'error' {
|
||||
switch (freshness) {
|
||||
case DataFreshness.FRESH: return 'success'
|
||||
case DataFreshness.STALE: return 'warning'
|
||||
case DataFreshness.OUTDATED: return 'error'
|
||||
}
|
||||
}
|
||||
|
||||
export default function DataQuality() {
|
||||
const { data: resp, isLoading, error } = useQuery({
|
||||
queryKey: ['properties'],
|
||||
queryFn: () => propertyService.getAll(),
|
||||
})
|
||||
|
||||
if (isLoading) return <LoadingPage />
|
||||
if (error) return <ErrorState />
|
||||
|
||||
const properties = resp?.data ?? []
|
||||
|
||||
const avgScore = properties.length
|
||||
? properties.reduce((sum, p) => sum + p.dataQuality.score, 0) / properties.length
|
||||
: 0
|
||||
|
||||
const criticalIssues = properties.filter(p => p.dataQuality.missingCriticalFields.length > 0)
|
||||
const staleData = properties.filter(
|
||||
p => p.dataQuality.freshness === DataFreshness.STALE || p.dataQuality.freshness === DataFreshness.OUTDATED
|
||||
)
|
||||
const highQuality = properties.filter(p => p.dataQuality.score >= 0.8)
|
||||
const medQuality = properties.filter(p => p.dataQuality.score >= 0.6 && p.dataQuality.score < 0.8)
|
||||
const lowQuality = properties.filter(p => p.dataQuality.score < 0.6)
|
||||
|
||||
// Sort by score ascending (worst first)
|
||||
const sortedProperties = [...properties].sort((a, b) => a.dataQuality.score - b.dataQuality.score)
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid', borderColor: 'divider', px: 3, py: 2 }}>
|
||||
<Typography variant="h5" fontWeight={700} color="text.primary">Datenqualität</Typography>
|
||||
<Typography variant="body2" color="text.secondary">Vollständigkeit und Aktualität der Objektdaten</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ px: 3, py: 3 }} className="flex flex-col gap-4">
|
||||
|
||||
{/* Summary Stats Row */}
|
||||
<Box className="grid grid-cols-3 gap-4">
|
||||
{/* Avg Quality Score */}
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" display="block">Ø Qualitätsscore</Typography>
|
||||
<Typography variant="h4" fontWeight={700} sx={{ color: avgScore >= 0.8 ? '#1a7a4a' : avgScore >= 0.6 ? '#d97706' : '#c0392b' }}>
|
||||
{Math.round(avgScore * 100)}%
|
||||
</Typography>
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={avgScore * 100}
|
||||
color={getQualityColor(avgScore)}
|
||||
sx={{ height: 8, borderRadius: 4 }}
|
||||
/>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Critical Issues */}
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" display="block">Kritische Felder fehlen</Typography>
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={700}
|
||||
sx={{ color: criticalIssues.length > 2 ? '#c0392b' : criticalIssues.length > 0 ? '#d97706' : '#1a7a4a' }}
|
||||
>
|
||||
{criticalIssues.length}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
von {properties.length} Objekten
|
||||
</Typography>
|
||||
</Card>
|
||||
|
||||
{/* Stale Data */}
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" display="block">Veraltete Daten</Typography>
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={700}
|
||||
sx={{ color: staleData.length > 2 ? '#c0392b' : staleData.length > 0 ? '#d97706' : '#1a7a4a' }}
|
||||
>
|
||||
{staleData.length}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
von {properties.length} Objekten
|
||||
</Typography>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Quality Distribution */}
|
||||
<SectionContainer title="Qualitätsverteilung">
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Box className="flex flex-col gap-3">
|
||||
{/* High */}
|
||||
<Box className="flex items-center gap-3">
|
||||
<Typography variant="body2" sx={{ width: 120, flexShrink: 0 }}>Hoch (≥80%)</Typography>
|
||||
<Chip label={highQuality.length} size="small" color="success" />
|
||||
<Box className="flex-1">
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={properties.length > 0 ? (highQuality.length / properties.length) * 100 : 0}
|
||||
color="success"
|
||||
sx={{ height: 10, borderRadius: 5 }}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ width: 40, textAlign: 'right' }}>
|
||||
{properties.length > 0 ? Math.round((highQuality.length / properties.length) * 100) : 0}%
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Medium */}
|
||||
<Box className="flex items-center gap-3">
|
||||
<Typography variant="body2" sx={{ width: 120, flexShrink: 0 }}>Mittel (60–79%)</Typography>
|
||||
<Chip label={medQuality.length} size="small" color="warning" />
|
||||
<Box className="flex-1">
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={properties.length > 0 ? (medQuality.length / properties.length) * 100 : 0}
|
||||
color="warning"
|
||||
sx={{ height: 10, borderRadius: 5 }}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ width: 40, textAlign: 'right' }}>
|
||||
{properties.length > 0 ? Math.round((medQuality.length / properties.length) * 100) : 0}%
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Low */}
|
||||
<Box className="flex items-center gap-3">
|
||||
<Typography variant="body2" sx={{ width: 120, flexShrink: 0 }}>Niedrig ({'<'}60%)</Typography>
|
||||
<Chip label={lowQuality.length} size="small" color="error" />
|
||||
<Box className="flex-1">
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={properties.length > 0 ? (lowQuality.length / properties.length) * 100 : 0}
|
||||
color="error"
|
||||
sx={{ height: 10, borderRadius: 5 }}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ width: 40, textAlign: 'right' }}>
|
||||
{properties.length > 0 ? Math.round((lowQuality.length / properties.length) * 100) : 0}%
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</SectionContainer>
|
||||
|
||||
{/* Properties Quality Table */}
|
||||
<SectionContainer title="Objektübersicht Datenqualität">
|
||||
<Card sx={{ elevation: 1 }}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow sx={{ bgcolor: 'grey.50' }}>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Objekt</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Quelle</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Score</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Kritische Felder</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Optionale Felder</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Aktualität</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Warnungen</Typography></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{sortedProperties.map(property => {
|
||||
const hasCritical = property.dataQuality.missingCriticalFields.length > 0
|
||||
const missingCritical = property.dataQuality.missingCriticalFields
|
||||
const missingOptional = property.dataQuality.missingOptionalFields
|
||||
const score = property.dataQuality.score
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={property.id}
|
||||
hover
|
||||
sx={hasCritical ? { bgcolor: 'rgba(192,57,43,0.04)' } : {}}
|
||||
>
|
||||
{/* Objekt */}
|
||||
<TableCell>
|
||||
<Typography variant="body2" fontWeight={500}>{property.title}</Typography>
|
||||
</TableCell>
|
||||
|
||||
{/* Quelle */}
|
||||
<TableCell>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{getResultTypeLabel(property.resultType)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
{/* Score */}
|
||||
<TableCell>
|
||||
<Box sx={{ width: 100 }}>
|
||||
<Box className="flex items-center justify-between mb-1">
|
||||
<Typography variant="caption" fontWeight={700} sx={{ color: score >= 0.8 ? '#1a7a4a' : score >= 0.6 ? '#d97706' : '#c0392b' }}>
|
||||
{Math.round(score * 100)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={score * 100}
|
||||
color={getQualityColor(score)}
|
||||
sx={{ height: 5, borderRadius: 2 }}
|
||||
/>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
{/* Kritische Felder */}
|
||||
<TableCell>
|
||||
{missingCritical.length === 0 ? (
|
||||
<Chip label="Vollständig" color="success" size="small" />
|
||||
) : (
|
||||
<Box className="flex flex-wrap gap-1 items-center">
|
||||
{missingCritical.slice(0, 2).map(f => (
|
||||
<Chip key={f} label={f} color="error" size="small" variant="outlined" />
|
||||
))}
|
||||
{missingCritical.length > 2 && (
|
||||
<Typography variant="caption" color="error.main" fontWeight={600}>
|
||||
+{missingCritical.length - 2} weitere
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
{/* Optionale Felder */}
|
||||
<TableCell>
|
||||
{missingOptional.length === 0 ? (
|
||||
<Typography variant="caption" color="text.secondary">–</Typography>
|
||||
) : (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{missingOptional.length} fehlen
|
||||
</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
{/* Aktualität */}
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={getFreshnessLabel(property.dataQuality.freshness)}
|
||||
color={getFreshnessColor(property.dataQuality.freshness)}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
{/* Warnungen */}
|
||||
<TableCell>
|
||||
{property.dataQuality.warnings.length > 0 ? (
|
||||
<Alert severity="warning" sx={{ py: 0, px: 1, fontSize: 11 }}>
|
||||
{property.dataQuality.warnings[0]}
|
||||
</Alert>
|
||||
) : (
|
||||
<Typography variant="caption" color="text.secondary">–</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
</SectionContainer>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Chip,
|
||||
Divider,
|
||||
LinearProgress,
|
||||
Typography,
|
||||
} from '@mui/material'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { EmptyState, ErrorState, LoadingPage } from '../../components/ui'
|
||||
import { futureSignalService } from '../../services/futureSignalService'
|
||||
import { SignalType } from '../../domain/enums'
|
||||
|
||||
function getSignalTypeLabel(type: SignalType): string {
|
||||
switch (type) {
|
||||
case SignalType.EXPANSION: return 'Expansion'
|
||||
case SignalType.POSSIBLE_MOVE_OUT: return 'Möglicher Auszug'
|
||||
case SignalType.CONSTRUCTION_PROJECT: return 'Bauprojekt'
|
||||
case SignalType.RESTRUCTURING: return 'Restrukturierung'
|
||||
case SignalType.PROJECT_DEVELOPMENT: return 'Projektentwicklung'
|
||||
case SignalType.SPACE_CONSOLIDATION: return 'Flächenkonsolidierung'
|
||||
}
|
||||
}
|
||||
|
||||
function getSignalTypeColor(type: SignalType): string {
|
||||
switch (type) {
|
||||
case SignalType.EXPANSION: return '#1a7a4a'
|
||||
case SignalType.POSSIBLE_MOVE_OUT: return '#d97706'
|
||||
case SignalType.CONSTRUCTION_PROJECT: return '#1e3a5f'
|
||||
case SignalType.RESTRUCTURING: return '#ea580c'
|
||||
case SignalType.PROJECT_DEVELOPMENT: return '#7c3aed'
|
||||
case SignalType.SPACE_CONSOLIDATION: return '#6b7280'
|
||||
}
|
||||
}
|
||||
|
||||
function getProbabilityColor(prob: number): 'success' | 'warning' | 'error' {
|
||||
if (prob > 0.7) return 'success'
|
||||
if (prob >= 0.5) return 'warning'
|
||||
return 'error'
|
||||
}
|
||||
|
||||
function formatDate(dateStr?: string): string {
|
||||
if (!dateStr) return '–'
|
||||
return new Date(dateStr).toLocaleDateString('de-CH', { day: '2-digit', month: '2-digit', year: 'numeric' })
|
||||
}
|
||||
|
||||
function getSourceTypeLabel(type: string): string {
|
||||
switch (type) {
|
||||
case 'PRESS': return 'Pressebericht'
|
||||
case 'CONSTRUCTION_PERMIT': return 'Baubewilligung'
|
||||
case 'JOB_POSTING': return 'Stelleninserat'
|
||||
case 'COMPANY_REPORT': return 'Geschäftsbericht'
|
||||
case 'MARKET_DATA': return 'Marktdaten'
|
||||
case 'MANUAL': return 'Manuell'
|
||||
default: return type
|
||||
}
|
||||
}
|
||||
|
||||
export default function FutureAvailability() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const { data: resp, isLoading, error } = useQuery({
|
||||
queryKey: ['futureSignals'],
|
||||
queryFn: () => futureSignalService.getAll(),
|
||||
})
|
||||
|
||||
const verifyMutation = useMutation({
|
||||
mutationFn: (signalId: string) => futureSignalService.verify(signalId, 'admin@ideal-sharing.ch'),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['futureSignals'] }),
|
||||
})
|
||||
|
||||
if (isLoading) return <LoadingPage />
|
||||
if (error) return <ErrorState />
|
||||
|
||||
const signals = resp?.data ?? []
|
||||
|
||||
const totalCount = signals.length
|
||||
const verifiedCount = signals.filter(s => s.isVerified).length
|
||||
const highProbCount = signals.filter(s => s.probability > 0.7).length
|
||||
const avgProbability = signals.length
|
||||
? signals.reduce((sum, s) => sum + s.probability, 0) / signals.length
|
||||
: 0
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid', borderColor: 'divider', px: 3, py: 2 }} className="flex items-center gap-3">
|
||||
<Box className="flex-1">
|
||||
<Box className="flex items-center gap-2">
|
||||
<Typography variant="h5" fontWeight={700} color="text.primary">Marktchancen</Typography>
|
||||
<Chip
|
||||
label="Shadow Intelligence Layer"
|
||||
size="small"
|
||||
sx={{ bgcolor: '#7c3aed', color: 'white', fontWeight: 600 }}
|
||||
/>
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary">KI-generierte Verfügbarkeitssignale</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ px: 3, py: 3 }} className="flex flex-col gap-4">
|
||||
|
||||
{/* Stats Row */}
|
||||
<Box className="grid grid-cols-4 gap-4">
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" display="block">Signale gesamt</Typography>
|
||||
<Typography variant="h4" fontWeight={700}>{totalCount}</Typography>
|
||||
</Card>
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" display="block">Verifiziert</Typography>
|
||||
<Typography variant="h4" fontWeight={700} sx={{ color: '#1a7a4a' }}>{verifiedCount}</Typography>
|
||||
</Card>
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" display="block">Hohe Wahrscheinlichkeit</Typography>
|
||||
<Typography variant="h4" fontWeight={700} sx={{ color: '#1e3a5f' }}>{highProbCount}</Typography>
|
||||
</Card>
|
||||
<Card sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Typography variant="overline" color="text.secondary" display="block">Ø Wahrscheinlichkeit</Typography>
|
||||
<Typography variant="h4" fontWeight={700} sx={{ color: getProbabilityColor(avgProbability) === 'success' ? '#1a7a4a' : getProbabilityColor(avgProbability) === 'warning' ? '#d97706' : '#c0392b' }}>
|
||||
{Math.round(avgProbability * 100)}%
|
||||
</Typography>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Signal Cards Grid */}
|
||||
{signals.length === 0 ? (
|
||||
<EmptyState title="Keine Signale gefunden" description="Es sind noch keine Zukunftssignale vorhanden." />
|
||||
) : (
|
||||
<Box className="flex flex-wrap gap-4">
|
||||
{signals.map(signal => (
|
||||
<Card key={signal.id} sx={{ elevation: 1, p: 2, flex: '1 1 calc(50% - 16px)', minWidth: 320 }}>
|
||||
{/* Card Header */}
|
||||
<Box className="flex items-center justify-between mb-2">
|
||||
<Chip
|
||||
label={getSignalTypeLabel(signal.signalType)}
|
||||
size="small"
|
||||
sx={{ bgcolor: getSignalTypeColor(signal.signalType), color: 'white', fontWeight: 600 }}
|
||||
/>
|
||||
<Chip
|
||||
label={signal.sensitivityLevel === 'PUBLIC' ? 'Öffentlich' : signal.sensitivityLevel === 'CONFIDENTIAL' ? 'Vertraulich' : 'Intern'}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color={signal.sensitivityLevel === 'CONFIDENTIAL' ? 'error' : 'default'}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Location */}
|
||||
<Box className="mb-2">
|
||||
<Typography variant="body1" fontWeight={500}>{signal.locationHint}</Typography>
|
||||
{signal.companyName && (
|
||||
<Typography variant="body2" color="text.secondary">{signal.companyName}</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Probability */}
|
||||
<Box className="mb-2">
|
||||
<Box className="flex items-center justify-between mb-1">
|
||||
<Typography variant="caption" color="text.secondary">Wahrscheinlichkeit</Typography>
|
||||
<Typography variant="body2" fontWeight={700} sx={{ color: signal.probability > 0.7 ? '#1a7a4a' : signal.probability >= 0.5 ? '#d97706' : '#c0392b' }}>
|
||||
{Math.round(signal.probability * 100)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={signal.probability * 100}
|
||||
color={getProbabilityColor(signal.probability)}
|
||||
sx={{ height: 6, borderRadius: 3 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Details */}
|
||||
<Box className="flex flex-wrap gap-2 mb-2">
|
||||
{signal.areaSqmEstimate && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Fläche: ca. {signal.areaSqmEstimate.toLocaleString('de-CH')} m²
|
||||
</Typography>
|
||||
)}
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Zeithorizont: {signal.timeHorizonMonths} Monate
|
||||
</Typography>
|
||||
{signal.expiresAt && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Verfügbar ab: {formatDate(signal.expiresAt)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Source */}
|
||||
<Box className="mb-2">
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Quelle: {getSourceTypeLabel(signal.source.type)} — Glaubwürdigkeit:{' '}
|
||||
<span style={{ color: signal.source.credibility === 'HIGH' ? '#1a7a4a' : signal.source.credibility === 'MEDIUM' ? '#d97706' : '#c0392b', fontWeight: 600 }}>
|
||||
{signal.source.credibility === 'HIGH' ? 'Hoch' : signal.source.credibility === 'MEDIUM' ? 'Mittel' : 'Niedrig'}
|
||||
</span>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Verification Status */}
|
||||
<Box className="mb-2">
|
||||
{signal.isVerified ? (
|
||||
<Box className="flex items-center gap-2">
|
||||
<Chip label="Verifiziert" color="success" size="small" />
|
||||
<Typography variant="caption" color="text.secondary">{formatDate(signal.verifiedAt)}</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Chip label="Nicht verifiziert" color="warning" size="small" variant="outlined" />
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ my: 1 }} />
|
||||
|
||||
{/* Footer buttons */}
|
||||
<Box className="flex items-center gap-2">
|
||||
{!signal.isVerified && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
onClick={() => verifyMutation.mutate(signal.id)}
|
||||
disabled={verifyMutation.isPending}
|
||||
>
|
||||
Verifizieren
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outlined" size="small" disabled>
|
||||
Zu Shortlist
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Chip,
|
||||
Divider,
|
||||
LinearProgress,
|
||||
Typography,
|
||||
} from '@mui/material'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Building2 } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { EmptyState, ErrorState, LoadingPage } from '../../components/ui'
|
||||
import { matchService } from '../../services/matchService'
|
||||
import { propertyService } from '../../services/propertyService'
|
||||
import { needService } from '../../services/needService'
|
||||
import { MatchStrength, RiskLevel } from '../../domain/enums'
|
||||
|
||||
function getMatchStrengthLabel(strength: MatchStrength): string {
|
||||
switch (strength) {
|
||||
case MatchStrength.STRONG: return 'Stark'
|
||||
case MatchStrength.MODERATE: return 'Mittel'
|
||||
case MatchStrength.WEAK: return 'Schwach'
|
||||
}
|
||||
}
|
||||
|
||||
function getMatchStrengthColor(strength: MatchStrength): 'success' | 'warning' | 'error' {
|
||||
switch (strength) {
|
||||
case MatchStrength.STRONG: return 'success'
|
||||
case MatchStrength.MODERATE: return 'warning'
|
||||
case MatchStrength.WEAK: return 'error'
|
||||
}
|
||||
}
|
||||
|
||||
function getScoreColor(strength: MatchStrength): string {
|
||||
switch (strength) {
|
||||
case MatchStrength.STRONG: return '#1a7a4a'
|
||||
case MatchStrength.MODERATE: return '#d97706'
|
||||
case MatchStrength.WEAK: return '#c0392b'
|
||||
}
|
||||
}
|
||||
|
||||
function getConfidenceColor(score: number): 'success' | 'primary' | 'warning' {
|
||||
if (score >= 0.85) return 'success'
|
||||
if (score >= 0.65) return 'primary'
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
function getConfidenceLabel(score: number): string {
|
||||
if (score >= 0.85) return 'Hoch'
|
||||
if (score >= 0.65) return 'Mittel'
|
||||
return 'Niedrig'
|
||||
}
|
||||
|
||||
function getRiskLabel(level: RiskLevel): string {
|
||||
switch (level) {
|
||||
case RiskLevel.LOW: return 'Niedriges Risiko'
|
||||
case RiskLevel.MEDIUM: return 'Mittleres Risiko'
|
||||
case RiskLevel.HIGH: return 'Hohes Risiko'
|
||||
case RiskLevel.CRITICAL: return 'Kritisches Risiko'
|
||||
}
|
||||
}
|
||||
|
||||
function getRiskColor(level: RiskLevel): 'success' | 'warning' | 'error' {
|
||||
switch (level) {
|
||||
case RiskLevel.LOW: return 'success'
|
||||
case RiskLevel.MEDIUM: return 'warning'
|
||||
case RiskLevel.HIGH: return 'error'
|
||||
case RiskLevel.CRITICAL: return 'error'
|
||||
}
|
||||
}
|
||||
|
||||
export default function MatchCenter() {
|
||||
const [filterStrength, setFilterStrength] = useState<MatchStrength | 'ALL'>('ALL')
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const { data: matchResp, isLoading: matchLoading, error: matchError } = useQuery({
|
||||
queryKey: ['matches'],
|
||||
queryFn: () => matchService.getAll(),
|
||||
})
|
||||
const { data: propResp, isLoading: propLoading, error: propError } = useQuery({
|
||||
queryKey: ['properties'],
|
||||
queryFn: () => propertyService.getAll(),
|
||||
})
|
||||
const { data: needResp, isLoading: needLoading, error: needError } = useQuery({
|
||||
queryKey: ['needs'],
|
||||
queryFn: () => needService.getAll(),
|
||||
})
|
||||
|
||||
const approveMutation = useMutation({
|
||||
mutationFn: (matchId: string) => matchService.approve(matchId, 'admin@ideal-sharing.ch'),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['matches'] }),
|
||||
})
|
||||
|
||||
if (matchLoading || propLoading || needLoading) return <LoadingPage />
|
||||
if (matchError || propError || needError) return <ErrorState />
|
||||
|
||||
const matches = matchResp?.data ?? []
|
||||
const properties = propResp?.data ?? []
|
||||
const needs = needResp?.data ?? []
|
||||
|
||||
const filtered = filterStrength === 'ALL'
|
||||
? matches
|
||||
: matches.filter(m => m.matchStrength === filterStrength)
|
||||
|
||||
const sortedFiltered = [...filtered].sort((a, b) => b.matchScore - a.matchScore)
|
||||
|
||||
const strengthFilters: { value: MatchStrength | 'ALL'; label: string }[] = [
|
||||
{ value: 'ALL', label: 'Alle' },
|
||||
{ value: MatchStrength.STRONG, label: 'Stark' },
|
||||
{ value: MatchStrength.MODERATE, label: 'Mittel' },
|
||||
{ value: MatchStrength.WEAK, label: 'Schwach' },
|
||||
]
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid', borderColor: 'divider', px: 3, py: 2 }} className="flex items-center justify-between">
|
||||
<Box>
|
||||
<Box className="flex items-center gap-2">
|
||||
<Typography variant="h5" fontWeight={700} color="text.primary">Match Center</Typography>
|
||||
<Chip label={`${matches.length} Matches`} size="small" sx={{ bgcolor: '#1e3a5f', color: 'white', fontWeight: 700 }} />
|
||||
</Box>
|
||||
<Typography variant="body2" color="text.secondary">KI-gestützte Objekt-Bedarfs-Analyse</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ px: 3, py: 3 }} className="flex flex-col gap-3">
|
||||
|
||||
{/* Filter Chips */}
|
||||
<Box className="flex items-center gap-2">
|
||||
{strengthFilters.map(f => (
|
||||
<Chip
|
||||
key={f.value}
|
||||
label={f.label}
|
||||
variant={filterStrength === f.value ? 'filled' : 'outlined'}
|
||||
size="small"
|
||||
onClick={() => setFilterStrength(f.value)}
|
||||
color={
|
||||
f.value === MatchStrength.STRONG ? 'success'
|
||||
: f.value === MatchStrength.MODERATE ? 'warning'
|
||||
: f.value === MatchStrength.WEAK ? 'error'
|
||||
: 'default'
|
||||
}
|
||||
sx={{ cursor: 'pointer', fontWeight: filterStrength === f.value ? 700 : 400 }}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* Match Cards */}
|
||||
{sortedFiltered.length === 0 ? (
|
||||
<EmptyState title="Keine Matches gefunden" description="Passen Sie den Filter an." />
|
||||
) : (
|
||||
<Box className="flex flex-col gap-4">
|
||||
{sortedFiltered.map(match => {
|
||||
const property = properties.find(p => p.id === match.propertyId)
|
||||
const need = needs.find(n => n.id === match.needId)
|
||||
|
||||
return (
|
||||
<Card key={match.id} sx={{ elevation: 1, p: 2.5 }}>
|
||||
<Box className="flex gap-4">
|
||||
{/* Left column: score */}
|
||||
<Box sx={{ width: 80, flexShrink: 0, textAlign: 'center' }} className="flex flex-col items-center gap-1">
|
||||
<Typography variant="h3" fontWeight={700} sx={{ color: getScoreColor(match.matchStrength) }}>
|
||||
{match.matchScore}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">/ 100</Typography>
|
||||
<Chip
|
||||
label={getMatchStrengthLabel(match.matchStrength)}
|
||||
color={getMatchStrengthColor(match.matchStrength)}
|
||||
size="small"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Center column: details */}
|
||||
<Box className="flex-1 flex flex-col gap-2">
|
||||
{/* Property info */}
|
||||
<Box className="flex items-center gap-1">
|
||||
<Building2 size={16} color="#1e3a5f" />
|
||||
<Typography variant="h6" fontWeight={600}>
|
||||
{property?.title ?? match.propertyId}
|
||||
</Typography>
|
||||
</Box>
|
||||
{need && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{need.companyName} — {need.assetType}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Positive factors */}
|
||||
<Box className="flex flex-col gap-1">
|
||||
{match.positiveFactors.slice(0, 3).map((f, i) => (
|
||||
<Box key={i} className="flex items-center gap-2">
|
||||
<Typography variant="caption" sx={{ color: '#1a7a4a', fontWeight: 600 }}>
|
||||
✓ {f.criterion}: {Math.round(f.score)}%
|
||||
</Typography>
|
||||
<Box sx={{ width: 60 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={f.score}
|
||||
color="success"
|
||||
sx={{ height: 4, borderRadius: 2 }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{/* Negative factors */}
|
||||
{match.negativeFactors.slice(0, 2).map((f, i) => (
|
||||
<Typography key={i} variant="caption" sx={{ color: '#c0392b' }}>
|
||||
✗ {f.criterion}
|
||||
</Typography>
|
||||
))}
|
||||
|
||||
{/* Tradeoffs */}
|
||||
{match.tradeoffs.length > 0 && (
|
||||
<Box>
|
||||
{match.tradeoffs.slice(0, 2).map((t, i) => (
|
||||
<Typography key={i} variant="caption" sx={{ color: '#d97706' }}>
|
||||
⚠ {t.concern}
|
||||
</Typography>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Right column: actions */}
|
||||
<Box sx={{ width: 160, flexShrink: 0, textAlign: 'right' }} className="flex flex-col gap-2 items-end">
|
||||
<Chip
|
||||
label={`Konfidenz: ${getConfidenceLabel(match.confidenceLevel)}`}
|
||||
color={getConfidenceColor(match.confidenceLevel)}
|
||||
size="small"
|
||||
/>
|
||||
<Chip
|
||||
label={getRiskLabel(match.riskLevel)}
|
||||
color={getRiskColor(match.riskLevel)}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
fullWidth
|
||||
disabled
|
||||
>
|
||||
Details
|
||||
</Button>
|
||||
{match.isApproved ? (
|
||||
<Chip
|
||||
label="✓ Genehmigt"
|
||||
color="success"
|
||||
size="small"
|
||||
sx={{ width: '100%', justifyContent: 'center' }}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
fullWidth
|
||||
color="primary"
|
||||
sx={{ bgcolor: '#1e3a5f' }}
|
||||
onClick={() => approveMutation.mutate(match.id)}
|
||||
disabled={approveMutation.isPending}
|
||||
>
|
||||
Genehmigen
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
Chip,
|
||||
IconButton,
|
||||
LinearProgress,
|
||||
MenuItem,
|
||||
Select,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from '@mui/material'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Eye, MoreHorizontal, Plus } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { EmptyState, ErrorState, LoadingPage } from '../../components/ui'
|
||||
import { propertyService } from '../../services/propertyService'
|
||||
import { AssetType, AvailabilityStatus, ResultType } from '../../domain/enums'
|
||||
|
||||
function getAssetTypeLabel(type: AssetType): string {
|
||||
switch (type) {
|
||||
case AssetType.OFFICE: return 'Büro'
|
||||
case AssetType.LOGISTICS: return 'Logistik'
|
||||
case AssetType.RETAIL: return 'Retail'
|
||||
case AssetType.GASTRO: return 'Gastro'
|
||||
case AssetType.PRODUCTION: return 'Produktion'
|
||||
case AssetType.MIXED: return 'Gemischt'
|
||||
}
|
||||
}
|
||||
|
||||
function getAssetTypeColor(type: AssetType): string {
|
||||
switch (type) {
|
||||
case AssetType.OFFICE: return '#1e3a5f'
|
||||
case AssetType.LOGISTICS: return '#d97706'
|
||||
case AssetType.RETAIL: return '#7c3aed'
|
||||
case AssetType.GASTRO: return '#0d9488'
|
||||
case AssetType.PRODUCTION: return '#92400e'
|
||||
case AssetType.MIXED: return '#6b7280'
|
||||
}
|
||||
}
|
||||
|
||||
function getAvailabilityLabel(status: AvailabilityStatus): string {
|
||||
switch (status) {
|
||||
case AvailabilityStatus.AVAILABLE_NOW: return 'Verfügbar'
|
||||
case AvailabilityStatus.AVAILABLE_SOON: return 'Bald verfügbar'
|
||||
case AvailabilityStatus.FUTURE_SIGNAL: return 'Zukunftssignal'
|
||||
case AvailabilityStatus.OCCUPIED: return 'Belegt'
|
||||
case AvailabilityStatus.UNKNOWN: return 'Unbekannt'
|
||||
}
|
||||
}
|
||||
|
||||
function getAvailabilityColor(status: AvailabilityStatus): 'success' | 'warning' | 'secondary' | 'error' | 'default' {
|
||||
switch (status) {
|
||||
case AvailabilityStatus.AVAILABLE_NOW: return 'success'
|
||||
case AvailabilityStatus.AVAILABLE_SOON: return 'warning'
|
||||
case AvailabilityStatus.FUTURE_SIGNAL: return 'secondary'
|
||||
case AvailabilityStatus.OCCUPIED: return 'error'
|
||||
case AvailabilityStatus.UNKNOWN: return 'default'
|
||||
}
|
||||
}
|
||||
|
||||
function getResultTypeLabel(type: ResultType): string {
|
||||
switch (type) {
|
||||
case ResultType.VERIFIED_PORTFOLIO: return 'Verified Portfolio'
|
||||
case ResultType.EXTERNAL_MARKET: return 'Marktinserat'
|
||||
case ResultType.FUTURE_AVAILABILITY: return 'Zukunftssignal'
|
||||
}
|
||||
}
|
||||
|
||||
function getResultTypeColor(type: ResultType): string {
|
||||
switch (type) {
|
||||
case ResultType.VERIFIED_PORTFOLIO: return '#1e3a5f'
|
||||
case ResultType.EXTERNAL_MARKET: return '#d97706'
|
||||
case ResultType.FUTURE_AVAILABILITY: return '#7c3aed'
|
||||
}
|
||||
}
|
||||
|
||||
function getConfidenceColor(score: number): string {
|
||||
if (score >= 0.85) return '#1a7a4a'
|
||||
if (score >= 0.65) return '#1e3a5f'
|
||||
return '#d97706'
|
||||
}
|
||||
|
||||
function getQualityColor(score: number): 'success' | 'warning' | 'error' {
|
||||
if (score >= 0.8) return 'success'
|
||||
if (score >= 0.6) return 'warning'
|
||||
return 'error'
|
||||
}
|
||||
|
||||
export default function Properties() {
|
||||
const [selectedResultType, setSelectedResultType] = useState<ResultType | 'ALL'>('ALL')
|
||||
const [selectedAssetType, setSelectedAssetType] = useState<AssetType | 'ALL'>('ALL')
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
|
||||
const { data: resp, isLoading, error } = useQuery({
|
||||
queryKey: ['properties'],
|
||||
queryFn: () => propertyService.getAll(),
|
||||
})
|
||||
|
||||
if (isLoading) return <LoadingPage />
|
||||
if (error) return <ErrorState />
|
||||
|
||||
const properties = resp?.data ?? []
|
||||
|
||||
const filtered = properties.filter(p => {
|
||||
if (selectedResultType !== 'ALL' && p.resultType !== selectedResultType) return false
|
||||
if (selectedAssetType !== 'ALL' && p.assetType !== selectedAssetType) return false
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase()
|
||||
const matchesTitle = p.title.toLowerCase().includes(q)
|
||||
const matchesCity = p.location.city.toLowerCase().includes(q)
|
||||
const matchesStreet = p.address.street.toLowerCase().includes(q)
|
||||
if (!matchesTitle && !matchesCity && !matchesStreet) return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
const sourceTypeFilters: { value: ResultType | 'ALL'; label: string; color: string }[] = [
|
||||
{ value: 'ALL', label: 'Alle', color: '#6b7280' },
|
||||
{ value: ResultType.VERIFIED_PORTFOLIO, label: 'Verified Portfolio', color: '#1e3a5f' },
|
||||
{ value: ResultType.EXTERNAL_MARKET, label: 'Marktinserate', color: '#d97706' },
|
||||
{ value: ResultType.FUTURE_AVAILABILITY, label: 'Zukunftssignale', color: '#7c3aed' },
|
||||
]
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid', borderColor: 'divider', px: 3, py: 2 }} className="flex items-center justify-between">
|
||||
<Box className="flex items-center gap-2">
|
||||
<Typography variant="h5" fontWeight={700} color="text.primary">Objekte</Typography>
|
||||
<Chip label={properties.length} size="small" sx={{ bgcolor: '#1e3a5f', color: 'white', fontWeight: 700 }} />
|
||||
</Box>
|
||||
<Tooltip title="In Entwicklung">
|
||||
<span>
|
||||
<button
|
||||
disabled
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
padding: '6px 16px',
|
||||
border: 'none',
|
||||
borderRadius: 4,
|
||||
background: '#1e3a5f',
|
||||
color: 'white',
|
||||
cursor: 'not-allowed',
|
||||
opacity: 0.5,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
<Plus size={16} />
|
||||
Neues Objekt
|
||||
</button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ px: 3, py: 3 }} className="flex flex-col gap-3">
|
||||
|
||||
{/* Filter Bar */}
|
||||
<Card sx={{ elevation: 1, p: 1.5 }}>
|
||||
<Box className="flex flex-col gap-2">
|
||||
{/* Row 1: Source type chips */}
|
||||
<Box className="flex items-center gap-2 flex-wrap">
|
||||
{sourceTypeFilters.map(f => (
|
||||
<Chip
|
||||
key={f.value}
|
||||
label={f.label}
|
||||
variant={selectedResultType === f.value ? 'filled' : 'outlined'}
|
||||
size="small"
|
||||
onClick={() => setSelectedResultType(f.value)}
|
||||
sx={
|
||||
selectedResultType === f.value
|
||||
? { bgcolor: f.color, color: 'white', borderColor: f.color, fontWeight: 600, cursor: 'pointer' }
|
||||
: { borderColor: f.color, color: f.color, cursor: 'pointer' }
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
{/* Row 2: Asset type select + search */}
|
||||
<Box className="flex items-center gap-2">
|
||||
<Select
|
||||
value={selectedAssetType}
|
||||
onChange={e => setSelectedAssetType(e.target.value as AssetType | 'ALL')}
|
||||
size="small"
|
||||
sx={{ minWidth: 160 }}
|
||||
>
|
||||
<MenuItem value="ALL">Alle Typen</MenuItem>
|
||||
{Object.values(AssetType).map(t => (
|
||||
<MenuItem key={t} value={t}>{getAssetTypeLabel(t)}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
<TextField
|
||||
value={searchQuery}
|
||||
onChange={e => setSearchQuery(e.target.value)}
|
||||
placeholder="Suche nach Titel, Stadt, Strasse…"
|
||||
size="small"
|
||||
sx={{ ml: 'auto', minWidth: 260 }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* Properties Table */}
|
||||
{filtered.length === 0 ? (
|
||||
<EmptyState title="Keine Objekte gefunden" description="Passen Sie die Filter an, um Ergebnisse anzuzeigen." />
|
||||
) : (
|
||||
<Card sx={{ elevation: 1 }}>
|
||||
<Table stickyHeader size="small">
|
||||
<TableHead>
|
||||
<TableRow sx={{ bgcolor: 'grey.50' }}>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Objekt</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Typ</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Standort</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Fläche</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Miete/m²</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Quelle</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Konfidenz</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Datenqualität</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Verfügbarkeit</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Aktionen</Typography></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{filtered.map(property => {
|
||||
const hasCritical = property.dataQuality.missingCriticalFields.length > 0
|
||||
return (
|
||||
<TableRow
|
||||
key={property.id}
|
||||
hover
|
||||
sx={hasCritical ? { bgcolor: 'rgba(192,57,43,0.04)' } : {}}
|
||||
>
|
||||
{/* Objekt */}
|
||||
<TableCell>
|
||||
<Typography variant="body2" fontWeight={500}>{property.title}</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{property.address.street} {property.address.houseNumber}, {property.address.city}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
{/* Typ */}
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={getAssetTypeLabel(property.assetType)}
|
||||
size="small"
|
||||
sx={{ bgcolor: getAssetTypeColor(property.assetType), color: 'white', fontSize: 11 }}
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
{/* Standort */}
|
||||
<TableCell>
|
||||
<Typography variant="body2">{property.location.city}</Typography>
|
||||
{property.location.canton && (
|
||||
<Typography variant="caption" color="text.secondary">{property.location.canton}</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
{/* Fläche */}
|
||||
<TableCell>
|
||||
<Typography variant="body2">{property.areaSqm.toLocaleString('de-CH')} m²</Typography>
|
||||
</TableCell>
|
||||
|
||||
{/* Miete/m² */}
|
||||
<TableCell>
|
||||
<Typography variant="body2">CHF {property.rentPricePerSqm}</Typography>
|
||||
</TableCell>
|
||||
|
||||
{/* Quelle */}
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={getResultTypeLabel(property.resultType)}
|
||||
size="small"
|
||||
sx={{ bgcolor: getResultTypeColor(property.resultType), color: 'white', fontSize: 11 }}
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
{/* Konfidenz */}
|
||||
<TableCell>
|
||||
<Typography
|
||||
variant="body2"
|
||||
fontWeight={600}
|
||||
sx={{ color: getConfidenceColor(property.confidenceScore) }}
|
||||
>
|
||||
{Math.round(property.confidenceScore * 100)}%
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
{/* Datenqualität */}
|
||||
<TableCell>
|
||||
<Tooltip
|
||||
title={
|
||||
<Box>
|
||||
{property.dataQuality.missingCriticalFields.length > 0 && (
|
||||
<Box>
|
||||
<Typography variant="caption" fontWeight={600}>Kritische Felder fehlen:</Typography>
|
||||
{property.dataQuality.missingCriticalFields.map(f => (
|
||||
<Typography key={f} variant="caption" display="block">• {f}</Typography>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
{property.dataQuality.warnings.length > 0 && (
|
||||
<Box mt={0.5}>
|
||||
<Typography variant="caption" fontWeight={600}>Warnungen:</Typography>
|
||||
{property.dataQuality.warnings.map((w, i) => (
|
||||
<Typography key={i} variant="caption" display="block">• {w}</Typography>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
{property.dataQuality.missingCriticalFields.length === 0 && property.dataQuality.warnings.length === 0 && (
|
||||
<Typography variant="caption">Keine Probleme</Typography>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Box sx={{ width: 80 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={property.dataQuality.score * 100}
|
||||
color={getQualityColor(property.dataQuality.score)}
|
||||
sx={{ height: 6, borderRadius: 3 }}
|
||||
/>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{Math.round(property.dataQuality.score * 100)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
|
||||
{/* Verfügbarkeit */}
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={getAvailabilityLabel(property.availabilityStatus)}
|
||||
color={getAvailabilityColor(property.availabilityStatus)}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
{/* Aktionen */}
|
||||
<TableCell>
|
||||
<Box className="flex items-center gap-1">
|
||||
<Tooltip title="Details (in Entwicklung)">
|
||||
<span>
|
||||
<IconButton size="small" disabled>
|
||||
<Eye size={16} />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip title="Mehr Aktionen (in Entwicklung)">
|
||||
<span>
|
||||
<IconButton size="small" disabled>
|
||||
<MoreHorizontal size={16} />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
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' : ''}`
|
||||
}
|
||||
|
||||
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'),
|
||||
})
|
||||
|
||||
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)
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Page Header */}
|
||||
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid', borderColor: 'divider', px: 3, py: 2 }}>
|
||||
<Typography variant="h5" fontWeight={700} color="text.primary">Supply Dashboard</Typography>
|
||||
<Typography variant="body2" color="text.secondary">Portfolioübersicht und aktuelle Kennzahlen</Typography>
|
||||
</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" lineHeight={1.4}>Objekte</Typography>
|
||||
<Building2 size={20} color="#1e3a5f" />
|
||||
</Box>
|
||||
<Typography variant="h3" 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" lineHeight={1.4}>Aktive Matches</Typography>
|
||||
<Target size={20} color="#1a7a4a" />
|
||||
</Box>
|
||||
<Typography variant="h3" 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" lineHeight={1.4}>Ø Datenqualität</Typography>
|
||||
<BarChart2 size={20} color={avgQuality >= 0.8 ? '#1a7a4a' : avgQuality >= 0.6 ? '#d97706' : '#c0392b'} />
|
||||
</Box>
|
||||
<Typography variant="h3" fontWeight={700} sx={{ 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" lineHeight={1.4}>Prüfungen ausstehend</Typography>
|
||||
<AlertTriangle size={20} color="#d97706" />
|
||||
</Box>
|
||||
<Typography variant="h3" fontWeight={700} sx={{ 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" 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" 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" 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" fontWeight={600}>Objekt</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Unternehmen</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Score</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" fontWeight={600}>Stärke</Typography></TableCell>
|
||||
<TableCell><Typography variant="caption" 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" 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" fontWeight={700}>{match.matchScore}</Typography>
|
||||
<Box sx={{ width: 80 }}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={match.matchScore}
|
||||
color={match.matchStrength === MatchStrength.STRONG ? 'success' : match.matchStrength === MatchStrength.MODERATE ? 'warning' : 'error'}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
label={getMatchStrengthLabel(match.matchStrength)}
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user