johannes.gasser/property-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve all MUI v9 TypeScript build errors

Browse Source 
- Move system props (fontWeight, lineHeight, display, alignItems, etc.) into sx
- Fix Lucide icon color prop (no sx support)
- Merge duplicate sx attributes
- Remove unused variables (location, _needId, v)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-15 10:37:07 +02:00
parent 67e4baf860
commit e20e0e9a2e
12 changed files with 164 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/demand/Results.tsx
+17 -22
View File
@@ -20,7 +20,7 @@ import {
Columns2,
} from 'lucide-react'
import { useQuery } from '@tanstack/react-query'
import { useNavigate, useLocation } from 'react-router'
import { useNavigate } from 'react-router'
import { propertyService } from '../../services/propertyService'
import { matchService } from '../../services/matchService'
import { needService } from '../../services/needService'
@@ -104,12 +104,12 @@ function ResultCard({ property, match, onCompare, isInCompare }: ResultCardProps
fontSize: 11,
}}
/>
<Typography variant="h6" fontWeight={600}>
<Typography variant="h6" sx={{ fontWeight: 600 }}>
{property.title}
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
<Typography variant="h4" fontWeight={800} sx={{ color: scoreColor }}>
<Typography variant="h4" sx={{ fontWeight: 800, color: scoreColor }}>
{match.matchScore}
</Typography>
<Typography variant="body2" color="text.secondary">/100</Typography>
@@ -117,7 +117,7 @@ function ResultCard({ property, match, onCompare, isInCompare }: ResultCardProps
</Box>
{/* Property details row */}
<Stack direction="row" spacing={2.5} sx={{ mb: 1.5 }} flexWrap="wrap">
<Stack direction="row" spacing={2.5} sx={{ mb: 1.5, flexWrap: 'wrap' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<MapPin size={14} color="#64748b" />
<Typography variant="body2" color="text.secondary">
@@ -150,10 +150,10 @@ function ResultCard({ property, match, onCompare, isInCompare }: ResultCardProps
{match.positiveFactors.length > 0 && (
<Box sx={{ mb: 1 }}>
<Typography variant="caption" fontWeight={600} color="text.secondary" display="block" mb={0.5}>
<Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }} color="text.secondary">
Positive Faktoren
</Typography>
<Stack direction="row" spacing={0.5} flexWrap="wrap" gap={0.5}>
<Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
{match.positiveFactors.slice(0, 3).map((f, i) => (
<Chip
key={i}
@@ -168,9 +168,9 @@ function ResultCard({ property, match, onCompare, isInCompare }: ResultCardProps
{match.tradeoffs.length > 0 && (
<Alert severity="warning" sx={{ py: 0.5, px: 1.5, mb: 1, '& .MuiAlert-message': { fontSize: 12 } }}>
<Typography variant="caption" fontWeight={600} display="block" mb={0.5}>Abwägungen</Typography>
<Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }}>Abwägungen</Typography>
{match.tradeoffs.slice(0, 2).map((t, i) => (
<Typography key={i} variant="caption" display="block">
<Typography key={i} variant="caption" sx={{ display: 'block' }}>
{t.criterion}: {t.concern}
</Typography>
))}
@@ -178,7 +178,7 @@ function ResultCard({ property, match, onCompare, isInCompare }: ResultCardProps
)}
{/* Confidence + Quality row */}
<Stack direction="row" spacing={2.5} alignItems="center" sx={{ mb: 1.5 }} flexWrap="wrap">
<Stack direction="row" spacing={2.5} sx={{ alignItems: 'center', mb: 1.5, flexWrap: 'wrap' }}>
<Typography variant="caption">
<span style={{ color: '#64748b' }}>Konfidenz </span>
<strong style={{ color: match.confidenceLevel >= 0.8 ? '#1a7a4a' : match.confidenceLevel >= 0.6 ? '#d97706' : '#c0392b' }}>
@@ -191,11 +191,9 @@ function ResultCard({ property, match, onCompare, isInCompare }: ResultCardProps
<LinearProgress
variant="determinate"
value={property.dataQuality.score * 100}
sx={{ height: 6, borderRadius: 3 }}
color={
sx={{ height: 6, borderRadius: 3, color:
property.dataQuality.score >= 0.8 ? 'success' :
property.dataQuality.score >= 0.6 ? 'warning' : 'error'
}
property.dataQuality.score >= 0.6 ? 'warning' : 'error' }}
/>
</Box>
<Typography variant="caption" color="text.secondary">
@@ -203,8 +201,7 @@ function ResultCard({ property, match, onCompare, isInCompare }: ResultCardProps
</Typography>
</Box>
{property.riskLevel && (
<Chip
label={getRiskLabel(property.riskLevel)}
<Chip label={getRiskLabel(property.riskLevel)}
size="small"
color={getRiskChipColor(property.riskLevel)}
variant="outlined"
@@ -246,8 +243,6 @@ function ResultCard({ property, match, onCompare, isInCompare }: ResultCardProps
export default function Results() {
const navigate = useNavigate()
const location = useLocation()
const _needId = (location.state as { needId?: string } | null)?.needId ?? 'need-001'
const [filterSource, setFilterSource] = useState<FilterSource>('ALL')
const [sortBy, setSortBy] = useState<SortBy>('score')
@@ -320,7 +315,7 @@ export default function Results() {
{/* Page Header */}
<Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Box>
<Typography variant="h5" fontWeight={700} color="text.primary">
<Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
{sorted.length} Treffer gefunden
</Typography>
<Typography variant="body2" color="text.secondary">
@@ -335,7 +330,7 @@ export default function Results() {
<Card sx={{ bgcolor: '#eff6ff', p: 2, mb: 2, border: '1px solid #bfdbfe' }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Box>
<Typography variant="subtitle2" fontWeight={600} color="#1e3a5f">
<Typography variant="subtitle2" sx={{ fontWeight: 600 }} color="#1e3a5f">
Aktive Suche: {activeNeed.companyName}
</Typography>
<Typography variant="caption" color="text.secondary">
@@ -358,7 +353,7 @@ export default function Results() {
{/* Filter/Sort bar */}
<Card sx={{ p: 1.5, mb: 2 }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 1 }}>
<Stack direction="row" spacing={0.5} flexWrap="wrap" gap={0.5}>
<Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
{(['ALL', ResultType.VERIFIED_PORTFOLIO, ResultType.EXTERNAL_MARKET, ResultType.FUTURE_AVAILABILITY] as FilterSource[]).map(source => {
const labels: Record<FilterSource, string> = {
ALL: 'Alle',
@@ -390,7 +385,7 @@ export default function Results() {
})}
</Stack>
<Stack direction="row" spacing={0.5} alignItems="center">
<Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
<Typography variant="caption" color="text.secondary">Sortierung:</Typography>
{([['score', 'Relevanz'], ['area', 'Fläche'], ['rent', 'Mietpreis']] as [SortBy, string][]).map(([val, label]) => (
<Chip
@@ -448,7 +443,7 @@ export default function Results() {
boxShadow: '0 -4px 12px rgba(0,0,0,0.15)',
}}
>
<Typography variant="body2" fontWeight={600}>
<Typography variant="body2" sx={{ fontWeight: 600 }}>
{compareTray.length} Objekte zum Vergleich ausgewählt
</Typography>
<Stack direction="row" spacing={1}>