From e20e0e9a2e07672830fe5bd3c4d52fdc8e05f948 Mon Sep 17 00:00:00 2001
From: Benjamin Sutter <beni_sutter@hotmail.com>
Date: Fri, 15 May 2026 10:37:07 +0200
Subject: [PATCH] fix: resolve all MUI v9 TypeScript build errors

- 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>
---
 src/pages/demand/AISearch.tsx           | 50 +++++++++++--------------
 src/pages/demand/Compare.tsx            | 20 +++++-----
 src/pages/demand/Results.tsx            | 39 +++++++++----------
 src/pages/demand/Shortlists.tsx         |  9 ++---
 src/pages/ops/AIMonitoring.tsx          | 20 +++++-----
 src/pages/ops/Governance.tsx            | 20 +++++-----
 src/pages/ops/ReviewQueue.tsx           | 33 ++++++++--------
 src/pages/supply/DataQuality.tsx        | 38 +++++++++----------
 src/pages/supply/FutureAvailability.tsx | 25 ++++++-------
 src/pages/supply/MatchCenter.tsx        | 12 +++---
 src/pages/supply/Properties.tsx         | 39 ++++++++++---------
 src/pages/supply/SupplyDashboard.tsx    | 42 ++++++++++-----------
 12 files changed, 164 insertions(+), 183 deletions(-)

diff --git a/src/pages/demand/AISearch.tsx b/src/pages/demand/AISearch.tsx
index e34c4ce..db303ae 100644
--- a/src/pages/demand/AISearch.tsx
+++ b/src/pages/demand/AISearch.tsx
@@ -53,7 +53,7 @@ export default function AISearch() {
     <Box>
       {/* Page Header */}
       <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2 }}>
-        <Typography variant="h5" fontWeight={700} color="text.primary">
+        <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
           AI Bedarfsanalyse
         </Typography>
         <Typography variant="body2" color="text.secondary">
@@ -66,7 +66,7 @@ export default function AISearch() {
         {step === 'input' && (
           <Box>
             <Card sx={{ maxWidth: 680, mx: 'auto', p: 3 }}>
-              <Typography variant="subtitle1" fontWeight={600} mb={2}>
+              <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
                 Flächenbedarf beschreiben
               </Typography>
               <TextField
@@ -76,10 +76,10 @@ export default function AISearch() {
                 placeholder="Beispiel: Wir suchen 800–1.000 m² Bürofläche in Zürich-West, verfügbar ab September 2025, Budget max. 45 CHF/m². Wichtig: gute ÖV-Anbindung, moderne Infrastruktur."
                 value={inputText}
                 onChange={e => setInputText(e.target.value)}
-                inputProps={{ maxLength: 2000 }}
+                slotProps={{ htmlInput: { maxLength: 2000 } }}
                 sx={{ mb: 1 }}
               />
-              <Typography variant="caption" color="text.secondary" display="block" textAlign="right" mb={2}>
+              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'right', mb: 2 }}>
                 {inputText.length}/2000
               </Typography>
               <Button
@@ -92,17 +92,17 @@ export default function AISearch() {
               >
                 Analysieren
               </Button>
-              <Typography variant="caption" color="text.secondary" display="block" textAlign="center">
+              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'center' }}>
                 Die KI extrahiert automatisch Kriterien, Standortpräferenzen und Budget aus Ihrer Beschreibung.
               </Typography>
             </Card>
 
             {/* Example Queries */}
             <Box sx={{ maxWidth: 680, mx: 'auto', mt: 2 }}>
-              <Typography variant="caption" color="text.secondary" display="block" mb={1}>
+              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
                 Beispiele:
               </Typography>
-              <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
+              <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1 }}>
                 {EXAMPLE_QUERIES.map(q => (
                   <Chip
                     key={q}
@@ -135,7 +135,7 @@ export default function AISearch() {
             <Box className="grid grid-cols-2 gap-4" sx={{ mb: 3 }}>
               {/* Left: Extracted Criteria */}
               <Card sx={{ p: 3 }}>
-                <Typography variant="subtitle1" fontWeight={600} mb={2}>
+                <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
                   Extrahierte Kriterien
                 </Typography>
 
@@ -161,8 +161,7 @@ export default function AISearch() {
                     <Box>
                       <Typography
                         variant="caption"
-                        fontWeight={600}
-                        sx={{ color: ConfidenceColor(extractedCriteria.confidence) }}
+                        sx={{ fontWeight: 600, color: ConfidenceColor(extractedCriteria.confidence) }}
                       >
                         Flächenbedarf
                       </Typography>
@@ -177,8 +176,7 @@ export default function AISearch() {
                     <Box>
                       <Typography
                         variant="caption"
-                        fontWeight={600}
-                        sx={{ color: ConfidenceColor(extractedCriteria.confidence) }}
+                        sx={{ fontWeight: 600, color: ConfidenceColor(extractedCriteria.confidence) }}
                       >
                         Budget
                       </Typography>
@@ -193,8 +191,7 @@ export default function AISearch() {
                     <Box>
                       <Typography
                         variant="caption"
-                        fontWeight={600}
-                        sx={{ color: ConfidenceColor(0.5) }}
+                        sx={{ fontWeight: 600, color: ConfidenceColor(0.5) }}
                       >
                         Unternehmen
                       </Typography>
@@ -208,8 +205,7 @@ export default function AISearch() {
                     <Box>
                       <Typography
                         variant="caption"
-                        fontWeight={600}
-                        sx={{ color: ConfidenceColor(0.85) }}
+                        sx={{ fontWeight: 600, color: ConfidenceColor(0.85) }}
                       >
                         Standort
                       </Typography>
@@ -223,8 +219,7 @@ export default function AISearch() {
                     <Box>
                       <Typography
                         variant="caption"
-                        fontWeight={600}
-                        sx={{ color: ConfidenceColor(0.85) }}
+                        sx={{ fontWeight: 600, color: ConfidenceColor(0.85) }}
                       >
                         Verfügbarkeit
                       </Typography>
@@ -238,8 +233,7 @@ export default function AISearch() {
                     <Box>
                       <Typography
                         variant="caption"
-                        fontWeight={600}
-                        sx={{ color: ConfidenceColor(0.85) }}
+                        sx={{ fontWeight: 600, color: ConfidenceColor(0.85) }}
                       >
                         Objekttyp
                       </Typography>
@@ -252,8 +246,8 @@ export default function AISearch() {
 
                 {/* Assumptions */}
                 {extractedCriteria.assumptions.length > 0 && (
-                  <Box mt={3}>
-                    <Typography variant="caption" fontWeight={600} color="text.secondary" display="block" mb={1}>
+                  <Box sx={{ mt: 3 }}>
+                    <Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 1 }} color="text.secondary">
                       Annahmen der KI
                     </Typography>
                     <Stack spacing={0.5}>
@@ -268,11 +262,11 @@ export default function AISearch() {
 
                 {/* Missing Fields */}
                 {extractedCriteria.missingFields.length > 0 && (
-                  <Box mt={2}>
-                    <Typography variant="caption" fontWeight={600} color="text.secondary" display="block" mb={1}>
+                  <Box sx={{ mt: 2 }}>
+                    <Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 1 }} color="text.secondary">
                       Fehlende Informationen
                     </Typography>
-                    <Stack direction="row" spacing={0.5} flexWrap="wrap" gap={0.5}>
+                    <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
                       {extractedCriteria.missingFields.map(f => (
                         <Chip
                           key={f}
@@ -289,17 +283,17 @@ export default function AISearch() {
 
               {/* Right: Follow-up Questions */}
               <Card sx={{ p: 3 }}>
-                <Typography variant="subtitle1" fontWeight={600} mb={0.5}>
+                <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 0.5 }}>
                   Rückfragen der KI
                 </Typography>
-                <Typography variant="caption" color="text.secondary" display="block" mb={2}>
+                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
                   Diese Fragen sind optional — verbessern jedoch die Trefferqualität.
                 </Typography>
 
                 <Stack spacing={3}>
                   {extractedCriteria.followUpQuestions.map((q, i) => (
                     <Box key={i}>
-                      <Typography variant="body2" fontWeight={500} mb={1}>
+                      <Typography variant="body2" sx={{ fontWeight: 500, mb: 1 }}>
                         {i + 1}. {q}
                       </Typography>
                       <TextField
diff --git a/src/pages/demand/Compare.tsx b/src/pages/demand/Compare.tsx
index b57ed6e..a0dfabd 100644
--- a/src/pages/demand/Compare.tsx
+++ b/src/pages/demand/Compare.tsx
@@ -107,7 +107,7 @@ export default function Compare() {
     return (
       <Box>
         <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2 }}>
-          <Typography variant="h5" fontWeight={700}>Vergleich</Typography>
+          <Typography variant="h5" sx={{ fontWeight: 700 }}>Vergleich</Typography>
         </Box>
         <Box sx={{ px: 3, py: 3 }}>
           <EmptyState
@@ -149,14 +149,13 @@ export default function Compare() {
     {
       label: 'Datenqualität',
       getValue: p => p.dataQuality.score,
-      format: (v, p) => (
+      format: (_v, p) => (
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <Box sx={{ width: 80 }}>
             <LinearProgress
               variant="determinate"
               value={p.dataQuality.score * 100}
-              sx={{ height: 6, borderRadius: 3 }}
-              color={p.dataQuality.score >= 0.8 ? 'success' : p.dataQuality.score >= 0.6 ? 'warning' : 'error'}
+              sx={{ height: 6, borderRadius: 3, color: p.dataQuality.score >= 0.8 ? 'success' : p.dataQuality.score >= 0.6 ? 'warning' : 'error' }}
             />
           </Box>
           <Typography variant="caption">{Math.round(p.dataQuality.score * 100)}%</Typography>
@@ -173,9 +172,8 @@ export default function Compare() {
     {
       label: 'Risiko',
       getValue: p => p.riskLevel ?? null,
-      format: (v, p) => (
-        <Chip
-          label={getRiskLabel(p.riskLevel)}
+      format: (_v, p) => (
+        <Chip label={getRiskLabel(p.riskLevel)}
           size="small"
           color={getRiskColor(p.riskLevel)}
           variant="outlined"
@@ -213,7 +211,7 @@ export default function Compare() {
       {/* Page Header */}
       <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-          <Typography variant="h5" fontWeight={700}>Vergleich</Typography>
+          <Typography variant="h5" sx={{ fontWeight: 700 }}>Vergleich</Typography>
           <Chip label={`${orderedProperties.length} Objekte`} size="small" />
         </Box>
         <Button variant="outlined" size="small" color="error" onClick={clearCompare}>
@@ -233,7 +231,7 @@ export default function Compare() {
                   <TableCell key={p.id} sx={{ borderLeft: '1px solid #f1f5f9', minWidth: 220 }}>
                     <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
                       <Box>
-                        <Typography variant="body2" fontWeight={600}>{p.title}</Typography>
+                        <Typography variant="body2" sx={{ fontWeight: 600 }}>{p.title}</Typography>
                         <Chip
                           label={getResultTypeLabel(p.resultType)}
                           size="small"
@@ -302,9 +300,9 @@ export default function Compare() {
         {/* Add more prompt */}
         {orderedProperties.length < 3 && (
           <Card sx={{ p: 2.5, mt: 2, border: '2px dashed #e2e8f0', boxShadow: 'none' }}>
-            <Stack direction="row" alignItems="center" justifyContent="space-between">
+            <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
               <Box>
-                <Typography variant="subtitle2" fontWeight={600}>Weiteres Objekt hinzufügen</Typography>
+                <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>Weiteres Objekt hinzufügen</Typography>
                 <Typography variant="caption" color="text.secondary">
                   Bis zu {3 - orderedProperties.length} weitere{orderedProperties.length < 2 ? 's' : ''} Objekt{orderedProperties.length < 2 ? '' : 'e'} möglich
                 </Typography>
diff --git a/src/pages/demand/Results.tsx b/src/pages/demand/Results.tsx
index 2c4dbdc..76191a2 100644
--- a/src/pages/demand/Results.tsx
+++ b/src/pages/demand/Results.tsx
@@ -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}>
diff --git a/src/pages/demand/Shortlists.tsx b/src/pages/demand/Shortlists.tsx
index 58c5c79..6292557 100644
--- a/src/pages/demand/Shortlists.tsx
+++ b/src/pages/demand/Shortlists.tsx
@@ -62,7 +62,7 @@ export default function Shortlists() {
         }}
       >
         <Box>
-          <Typography variant="h5" fontWeight={700} color="text.primary">
+          <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
             Shortlists
           </Typography>
           <Typography variant="body2" color="text.secondary">
@@ -94,7 +94,7 @@ export default function Shortlists() {
                 }}
               >
                 <Box>
-                  <Typography variant="subtitle1" fontWeight={700}>
+                  <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
                     {sl.title}
                   </Typography>
                   <Typography variant="body2" color="text.secondary">
@@ -135,8 +135,7 @@ export default function Shortlists() {
                       }}
                     />
                     <ListItemText
-                      primary={prop}
-                      primaryTypographyProps={{ variant: 'body2' }}
+                      primary={<Typography variant="body2">{prop}</Typography>}
                     />
                   </ListItem>
                 ))}
@@ -163,7 +162,7 @@ export default function Shortlists() {
               bgcolor: '#fafafa',
             }}
           >
-            <Typography variant="body2" color="text.secondary" textAlign="center">
+            <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
               Objekte aus den Suchergebnissen zur Shortlist hinzufügen
             </Typography>
           </Card>
diff --git a/src/pages/ops/AIMonitoring.tsx b/src/pages/ops/AIMonitoring.tsx
index ba73c58..50d3ff3 100644
--- a/src/pages/ops/AIMonitoring.tsx
+++ b/src/pages/ops/AIMonitoring.tsx
@@ -124,7 +124,7 @@ export default function AIMonitoring() {
       >
         <Box sx={{ flex: 1 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-            <Typography variant="h5" fontWeight={700} color="text.primary">
+            <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
               AI Monitoring
             </Typography>
             <Chip
@@ -154,10 +154,10 @@ export default function AIMonitoring() {
         <Box className="grid grid-cols-4 gap-4" sx={{ mb: 3 }}>
           {HEALTH_METRICS.map(m => (
             <Card key={m.label} sx={{ p: 2.5 }}>
-              <Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
+              <Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
                 {m.label}
               </Typography>
-              <Typography variant="h3" fontWeight={800} sx={{ color: m.color }}>
+              <Typography variant="h3" sx={{ fontWeight: 800, color: m.color }}>
                 {m.value}
               </Typography>
               <Typography variant="caption" color="text.secondary">
@@ -170,7 +170,7 @@ export default function AIMonitoring() {
         <Box className="grid grid-cols-2 gap-4" sx={{ mb: 3 }}>
           {/* Confidence Distribution */}
           <Card sx={{ p: 2.5 }}>
-            <Typography variant="subtitle1" fontWeight={600} mb={2}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
               Konfidenzverteilung
             </Typography>
 
@@ -182,7 +182,7 @@ export default function AIMonitoring() {
               <Stack spacing={2}>
                 <Box>
                   <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
-                    <Typography variant="body2" fontWeight={500}>Hoch (&gt;85%)</Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 500 }}>Hoch (&gt;85%)</Typography>
                     <Typography variant="body2" color="text.secondary">{highConf} Objekte</Typography>
                   </Box>
                   <LinearProgress
@@ -194,7 +194,7 @@ export default function AIMonitoring() {
                 </Box>
                 <Box>
                   <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
-                    <Typography variant="body2" fontWeight={500}>Mittel (65–85%)</Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 500 }}>Mittel (65–85%)</Typography>
                     <Typography variant="body2" color="text.secondary">{midConf} Objekte</Typography>
                   </Box>
                   <LinearProgress
@@ -206,7 +206,7 @@ export default function AIMonitoring() {
                 </Box>
                 <Box>
                   <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
-                    <Typography variant="body2" fontWeight={500}>Niedrig (&lt;65%)</Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 500 }}>Niedrig (&lt;65%)</Typography>
                     <Typography variant="body2" color="text.secondary">{lowConf} Objekte</Typography>
                   </Box>
                   <LinearProgress
@@ -222,7 +222,7 @@ export default function AIMonitoring() {
 
           {/* Anomaly Alerts */}
           <Card sx={{ p: 2.5 }}>
-            <Typography variant="subtitle1" fontWeight={600} mb={2}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
               Anomalien
             </Typography>
             <Stack spacing={1.5}>
@@ -239,7 +239,7 @@ export default function AIMonitoring() {
         {/* Recent AI Decisions */}
         <Card>
           <Box sx={{ px: 2.5, py: 2, borderBottom: '1px solid #f1f5f9' }}>
-            <Typography variant="subtitle1" fontWeight={600}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
               Letzte KI-Entscheidungen
             </Typography>
           </Box>
@@ -260,7 +260,7 @@ export default function AIMonitoring() {
                     <Typography variant="caption" color="text.secondary">{d.timestamp}</Typography>
                   </TableCell>
                   <TableCell>
-                    <Typography variant="body2" fontWeight={500}>{d.type}</Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 500 }}>{d.type}</Typography>
                   </TableCell>
                   <TableCell>{getConfidenceBadge(d.confidence)}</TableCell>
                   <TableCell>
diff --git a/src/pages/ops/Governance.tsx b/src/pages/ops/Governance.tsx
index 5f15c8f..b8d7086 100644
--- a/src/pages/ops/Governance.tsx
+++ b/src/pages/ops/Governance.tsx
@@ -141,7 +141,7 @@ export default function Governance() {
         }}
       >
         <Box>
-          <Typography variant="h5" fontWeight={700} color="text.primary">
+          <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
             Governance & Aktivitätslog
           </Typography>
           <Typography variant="body2" color="text.secondary">
@@ -157,28 +157,28 @@ export default function Governance() {
         {/* Stats row */}
         <Box className="grid grid-cols-3 gap-4" sx={{ mb: 3 }}>
           <Card sx={{ p: 2.5 }}>
-            <Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
+            <Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
               Ereignisse gesamt
             </Typography>
-            <Typography variant="h3" fontWeight={700}>
+            <Typography variant="h3" sx={{ fontWeight: 700 }}>
               {events.length}
             </Typography>
             <Typography variant="caption" color="text.secondary">Alle Aktivitäten</Typography>
           </Card>
           <Card sx={{ p: 2.5 }}>
-            <Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
+            <Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
               Ereignisse heute
             </Typography>
-            <Typography variant="h3" fontWeight={700}>
+            <Typography variant="h3" sx={{ fontWeight: 700 }}>
               {todayCount}
             </Typography>
             <Typography variant="caption" color="text.secondary">Heutige Aktivitäten</Typography>
           </Card>
           <Card sx={{ p: 2.5 }}>
-            <Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
+            <Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
               Aktive Benutzer
             </Typography>
-            <Typography variant="h3" fontWeight={700}>
+            <Typography variant="h3" sx={{ fontWeight: 700 }}>
               {uniqueUsers}
             </Typography>
             <Typography variant="caption" color="text.secondary">Unterschiedliche Nutzer</Typography>
@@ -186,7 +186,7 @@ export default function Governance() {
         </Box>
 
         {/* Filter chips */}
-        <Stack direction="row" spacing={0.5} flexWrap="wrap" gap={0.5} sx={{ mb: 2 }}>
+        <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5, mb: 2 }}>
           <Chip
             label="Alle"
             size="small"
@@ -218,7 +218,7 @@ export default function Governance() {
 
         {/* Activity Timeline */}
         <Card sx={{ p: 2.5 }}>
-          <Typography variant="subtitle1" fontWeight={600} mb={2}>
+          <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
             Aktivitätslog
           </Typography>
 
@@ -278,7 +278,7 @@ export default function Governance() {
                         {getEventDescription(event)}
                       </Typography>
                       {event.notes && (
-                        <Typography variant="caption" color="text.secondary" display="block" mt={0.25}>
+                        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.25 }}>
                           {event.notes}
                         </Typography>
                       )}
diff --git a/src/pages/ops/ReviewQueue.tsx b/src/pages/ops/ReviewQueue.tsx
index e44ff90..fe49282 100644
--- a/src/pages/ops/ReviewQueue.tsx
+++ b/src/pages/ops/ReviewQueue.tsx
@@ -141,7 +141,7 @@ export default function ReviewQueue() {
       <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
         <Box>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-            <Typography variant="h5" fontWeight={700} color="text.primary">
+            <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
               Review Queue
             </Typography>
             {totalPending > 0 && (
@@ -162,10 +162,10 @@ export default function ReviewQueue() {
         {/* Stats row */}
         <Box className="grid grid-cols-2 gap-4" sx={{ mb: 3 }}>
           <Card sx={{ p: 2.5 }}>
-            <Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
+            <Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
               Offene Reviews
             </Typography>
-            <Typography variant="h3" fontWeight={700} sx={{ color: totalPending > 0 ? 'warning.main' : 'text.primary' }}>
+            <Typography variant="h3" sx={{ fontWeight: 700, color: totalPending > 0 ? 'warning.main' : 'text.primary' }}>
               {totalPending}
             </Typography>
             <Typography variant="caption" color="text.secondary">
@@ -173,10 +173,10 @@ export default function ReviewQueue() {
             </Typography>
           </Card>
           <Card sx={{ p: 2.5 }}>
-            <Typography variant="overline" color="text.secondary" lineHeight={1.4} display="block">
+            <Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4, display: 'block' }}>
               Signale zur Prüfung
             </Typography>
-            <Typography variant="h3" fontWeight={700} sx={{ color: signalItems.length > 0 ? 'warning.main' : 'text.primary' }}>
+            <Typography variant="h3" sx={{ fontWeight: 700, color: signalItems.length > 0 ? 'warning.main' : 'text.primary' }}>
               {signalItems.length}
             </Typography>
             <Typography variant="caption" color="text.secondary">
@@ -190,7 +190,7 @@ export default function ReviewQueue() {
           {/* Left: Item List */}
           <Card sx={{ p: 0, overflow: 'hidden' }}>
             <Box sx={{ px: 2, py: 1.5, borderBottom: '1px solid #f1f5f9' }}>
-              <Typography variant="subtitle2" fontWeight={600}>
+              <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                 Ausstehende Elemente
               </Typography>
             </Box>
@@ -240,10 +240,10 @@ export default function ReviewQueue() {
                       }
                     </Box>
                     <Box sx={{ flex: 1, minWidth: 0 }}>
-                      <Typography variant="body2" fontWeight={500} noWrap>
+                      <Typography variant="body2" sx={{ fontWeight: 500 }} noWrap>
                         {item.title}
                       </Typography>
-                      <Stack direction="row" spacing={0.5} mt={0.5} flexWrap="wrap">
+                      <Stack direction="row" spacing={0.5} sx={{ mt: 0.5, flexWrap: 'wrap' }}>
                         <Chip
                           label={getPriorityLabel(item.confidence)}
                           size="small"
@@ -284,7 +284,7 @@ export default function ReviewQueue() {
                         fontWeight: 600,
                       }}
                     />
-                    <Typography variant="subtitle2" fontWeight={600}>
+                    <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                       {selectedItem.title}
                     </Typography>
                   </Box>
@@ -295,23 +295,22 @@ export default function ReviewQueue() {
                   <Stack spacing={1} sx={{ mb: 2 }}>
                     <Box sx={{ display: 'flex', gap: 3 }}>
                       <Box>
-                        <Typography variant="caption" color="text.secondary" display="block">Konfidenz</Typography>
-                        <Typography variant="body2" fontWeight={600}>
+                        <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>Konfidenz</Typography>
+                        <Typography variant="body2" sx={{ fontWeight: 600 }}>
                           {Math.round(selectedItem.confidence * 100)}%
                         </Typography>
                       </Box>
                       {selectedItem.probability != null && (
                         <Box>
-                          <Typography variant="caption" color="text.secondary" display="block">Wahrscheinlichkeit</Typography>
-                          <Typography variant="body2" fontWeight={600}>
+                          <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>Wahrscheinlichkeit</Typography>
+                          <Typography variant="body2" sx={{ fontWeight: 600 }}>
                             {Math.round(selectedItem.probability * 100)}%
                           </Typography>
                         </Box>
                       )}
                       <Box>
-                        <Typography variant="caption" color="text.secondary" display="block">Risiko</Typography>
-                        <Chip
-                          label={getRiskLabel(selectedItem.risk)}
+                        <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>Risiko</Typography>
+                        <Chip label={getRiskLabel(selectedItem.risk)}
                           size="small"
                           color={getRiskColor(selectedItem.risk)}
                           variant="outlined"
@@ -329,7 +328,7 @@ export default function ReviewQueue() {
                   <Divider sx={{ mb: 2 }} />
 
                   {/* Notes */}
-                  <Typography variant="caption" fontWeight={600} color="text.secondary" display="block" mb={1}>
+                  <Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 1 }} color="text.secondary">
                     Notizen
                   </Typography>
                   <TextField
diff --git a/src/pages/supply/DataQuality.tsx b/src/pages/supply/DataQuality.tsx
index 0771c54..3f43a8e 100644
--- a/src/pages/supply/DataQuality.tsx
+++ b/src/pages/supply/DataQuality.tsx
@@ -76,7 +76,7 @@ export default function DataQuality() {
     <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="h5" sx={{ fontWeight: 700 }} color="text.primary">Datenqualität</Typography>
         <Typography variant="body2" color="text.secondary">Vollständigkeit und Aktualität der Objektdaten</Typography>
       </Box>
 
@@ -87,8 +87,8 @@ export default function DataQuality() {
         <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' }}>
+            <Typography variant="overline" color="text.secondary" sx={{ display: 'block' }}>Ø Qualitätsscore</Typography>
+            <Typography variant="h4" sx={{ fontWeight: 700, color: avgScore >= 0.8 ? '#1a7a4a' : avgScore >= 0.6 ? '#d97706' : '#c0392b' }}>
               {Math.round(avgScore * 100)}%
             </Typography>
             <Box sx={{ mt: 1 }}>
@@ -103,11 +103,10 @@ export default function DataQuality() {
 
           {/* Critical Issues */}
           <Card sx={{ elevation: 1, p: 2.5 }}>
-            <Typography variant="overline" color="text.secondary" display="block">Kritische Felder fehlen</Typography>
+            <Typography variant="overline" color="text.secondary" sx={{ display: 'block' }}>Kritische Felder fehlen</Typography>
             <Typography
               variant="h4"
-              fontWeight={700}
-              sx={{ color: criticalIssues.length > 2 ? '#c0392b' : criticalIssues.length > 0 ? '#d97706' : '#1a7a4a' }}
+              sx={{ fontWeight: 700, color: criticalIssues.length > 2 ? '#c0392b' : criticalIssues.length > 0 ? '#d97706' : '#1a7a4a' }}
             >
               {criticalIssues.length}
             </Typography>
@@ -118,11 +117,10 @@ export default function DataQuality() {
 
           {/* Stale Data */}
           <Card sx={{ elevation: 1, p: 2.5 }}>
-            <Typography variant="overline" color="text.secondary" display="block">Veraltete Daten</Typography>
+            <Typography variant="overline" color="text.secondary" sx={{ display: 'block' }}>Veraltete Daten</Typography>
             <Typography
               variant="h4"
-              fontWeight={700}
-              sx={{ color: staleData.length > 2 ? '#c0392b' : staleData.length > 0 ? '#d97706' : '#1a7a4a' }}
+              sx={{ fontWeight: 700, color: staleData.length > 2 ? '#c0392b' : staleData.length > 0 ? '#d97706' : '#1a7a4a' }}
             >
               {staleData.length}
             </Typography>
@@ -196,13 +194,13 @@ export default function DataQuality() {
             <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>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Objekt</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Quelle</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Score</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Kritische Felder</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Optionale Felder</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Aktualität</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Warnungen</Typography></TableCell>
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -220,7 +218,7 @@ export default function DataQuality() {
                     >
                       {/* Objekt */}
                       <TableCell>
-                        <Typography variant="body2" fontWeight={500}>{property.title}</Typography>
+                        <Typography variant="body2" sx={{ fontWeight: 500 }}>{property.title}</Typography>
                       </TableCell>
 
                       {/* Quelle */}
@@ -234,7 +232,7 @@ export default function DataQuality() {
                       <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' }}>
+                            <Typography variant="caption" sx={{ fontWeight: 700, color: score >= 0.8 ? '#1a7a4a' : score >= 0.6 ? '#d97706' : '#c0392b' }}>
                               {Math.round(score * 100)}%
                             </Typography>
                           </Box>
@@ -257,7 +255,7 @@ export default function DataQuality() {
                               <Chip key={f} label={f} color="error" size="small" variant="outlined" />
                             ))}
                             {missingCritical.length > 2 && (
-                              <Typography variant="caption" color="error.main" fontWeight={600}>
+                              <Typography variant="caption" sx={{ fontWeight: 600 }} color="error.main">
                                 +{missingCritical.length - 2} weitere
                               </Typography>
                             )}
@@ -280,7 +278,7 @@ export default function DataQuality() {
                       <TableCell>
                         <Chip
                           label={getFreshnessLabel(property.dataQuality.freshness)}
-                          color={getFreshnessColor(property.dataQuality.freshness)}
+                          sx={{ color: getFreshnessColor(property.dataQuality.freshness) }}
                           size="small"
                         />
                       </TableCell>
diff --git a/src/pages/supply/FutureAvailability.tsx b/src/pages/supply/FutureAvailability.tsx
index 7184711..c76d134 100644
--- a/src/pages/supply/FutureAvailability.tsx
+++ b/src/pages/supply/FutureAvailability.tsx
@@ -88,7 +88,7 @@ export default function FutureAvailability() {
       <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>
+            <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">Marktchancen</Typography>
             <Chip
               label="Shadow Intelligence Layer"
               size="small"
@@ -105,20 +105,20 @@ export default function FutureAvailability() {
         {/* 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>
+            <Typography variant="overline" color="text.secondary" sx={{ display: 'block' }}>Signale gesamt</Typography>
+            <Typography variant="h4" sx={{ 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>
+            <Typography variant="overline" color="text.secondary" sx={{ display: 'block' }}>Verifiziert</Typography>
+            <Typography variant="h4" sx={{ fontWeight: 700, 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>
+            <Typography variant="overline" color="text.secondary" sx={{ display: 'block' }}>Hohe Wahrscheinlichkeit</Typography>
+            <Typography variant="h4" sx={{ fontWeight: 700, 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' }}>
+            <Typography variant="overline" color="text.secondary" sx={{ display: 'block' }}>Ø Wahrscheinlichkeit</Typography>
+            <Typography variant="h4" sx={{ fontWeight: 700, color: getProbabilityColor(avgProbability) === 'success' ? '#1a7a4a' : getProbabilityColor(avgProbability) === 'warning' ? '#d97706' : '#c0392b' }}>
               {Math.round(avgProbability * 100)}%
             </Typography>
           </Card>
@@ -138,8 +138,7 @@ export default function FutureAvailability() {
                     size="small"
                     sx={{ bgcolor: getSignalTypeColor(signal.signalType), color: 'white', fontWeight: 600 }}
                   />
-                  <Chip
-                    label={signal.sensitivityLevel === 'PUBLIC' ? 'Öffentlich' : signal.sensitivityLevel === 'CONFIDENTIAL' ? 'Vertraulich' : 'Intern'}
+                  <Chip label={signal.sensitivityLevel === 'PUBLIC' ? 'Öffentlich' : signal.sensitivityLevel === 'CONFIDENTIAL' ? 'Vertraulich' : 'Intern'}
                     size="small"
                     variant="outlined"
                     color={signal.sensitivityLevel === 'CONFIDENTIAL' ? 'error' : 'default'}
@@ -148,7 +147,7 @@ export default function FutureAvailability() {
 
                 {/* Location */}
                 <Box className="mb-2">
-                  <Typography variant="body1" fontWeight={500}>{signal.locationHint}</Typography>
+                  <Typography variant="body1" sx={{ fontWeight: 500 }}>{signal.locationHint}</Typography>
                   {signal.companyName && (
                     <Typography variant="body2" color="text.secondary">{signal.companyName}</Typography>
                   )}
@@ -158,7 +157,7 @@ export default function FutureAvailability() {
                 <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' }}>
+                    <Typography variant="body2" sx={{ fontWeight: 700, color: signal.probability > 0.7 ? '#1a7a4a' : signal.probability >= 0.5 ? '#d97706' : '#c0392b' }}>
                       {Math.round(signal.probability * 100)}%
                     </Typography>
                   </Box>
diff --git a/src/pages/supply/MatchCenter.tsx b/src/pages/supply/MatchCenter.tsx
index 3665792..69d9b67 100644
--- a/src/pages/supply/MatchCenter.tsx
+++ b/src/pages/supply/MatchCenter.tsx
@@ -119,7 +119,7 @@ export default function MatchCenter() {
       <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>
+            <Typography variant="h5" sx={{ 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>
@@ -163,13 +163,13 @@ export default function MatchCenter() {
                   <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) }}>
+                      <Typography variant="h3" sx={{ fontWeight: 700,  color: getScoreColor(match.matchStrength) }}>
                         {match.matchScore}
                       </Typography>
                       <Typography variant="caption" color="text.secondary">/ 100</Typography>
                       <Chip
                         label={getMatchStrengthLabel(match.matchStrength)}
-                        color={getMatchStrengthColor(match.matchStrength)}
+                        sx={{ color: getMatchStrengthColor(match.matchStrength) }}
                         size="small"
                       />
                     </Box>
@@ -179,7 +179,7 @@ export default function MatchCenter() {
                       {/* Property info */}
                       <Box className="flex items-center gap-1">
                         <Building2 size={16} color="#1e3a5f" />
-                        <Typography variant="h6" fontWeight={600}>
+                        <Typography variant="h6" sx={{ fontWeight: 600 }}>
                           {property?.title ?? match.propertyId}
                         </Typography>
                       </Box>
@@ -233,12 +233,12 @@ export default function MatchCenter() {
                     <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)}
+                        sx={{ color: getConfidenceColor(match.confidenceLevel) }}
                         size="small"
                       />
                       <Chip
                         label={getRiskLabel(match.riskLevel)}
-                        color={getRiskColor(match.riskLevel)}
+                        sx={{ color: getRiskColor(match.riskLevel) }}
                         size="small"
                         variant="outlined"
                       />
diff --git a/src/pages/supply/Properties.tsx b/src/pages/supply/Properties.tsx
index 1167e5c..12e70dd 100644
--- a/src/pages/supply/Properties.tsx
+++ b/src/pages/supply/Properties.tsx
@@ -132,7 +132,7 @@ export default function Properties() {
       {/* 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>
+          <Typography variant="h5" sx={{ 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">
@@ -216,16 +216,16 @@ export default function Properties() {
             <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>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Objekt</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Typ</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Standort</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Fläche</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Miete/m²</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Quelle</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Konfidenz</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Datenqualität</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Verfügbarkeit</Typography></TableCell>
+                  <TableCell><Typography variant="caption" sx={{ fontWeight: 600 }}>Aktionen</Typography></TableCell>
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -239,7 +239,7 @@ export default function Properties() {
                     >
                       {/* Objekt */}
                       <TableCell>
-                        <Typography variant="body2" fontWeight={500}>{property.title}</Typography>
+                        <Typography variant="body2" sx={{ fontWeight: 500 }}>{property.title}</Typography>
                         <Typography variant="caption" color="text.secondary">
                           {property.address.street} {property.address.houseNumber}, {property.address.city}
                         </Typography>
@@ -285,8 +285,7 @@ export default function Properties() {
                       <TableCell>
                         <Typography
                           variant="body2"
-                          fontWeight={600}
-                          sx={{ color: getConfidenceColor(property.confidenceScore) }}
+                          sx={{ fontWeight: 600,  color: getConfidenceColor(property.confidenceScore) }}
                         >
                           {Math.round(property.confidenceScore * 100)}%
                         </Typography>
@@ -299,17 +298,17 @@ export default function Properties() {
                             <Box>
                               {property.dataQuality.missingCriticalFields.length > 0 && (
                                 <Box>
-                                  <Typography variant="caption" fontWeight={600}>Kritische Felder fehlen:</Typography>
+                                  <Typography variant="caption" sx={{ fontWeight: 600 }}>Kritische Felder fehlen:</Typography>
                                   {property.dataQuality.missingCriticalFields.map(f => (
-                                    <Typography key={f} variant="caption" display="block">• {f}</Typography>
+                                    <Typography key={f} variant="caption" sx={{ display: 'block' }}>• {f}</Typography>
                                   ))}
                                 </Box>
                               )}
                               {property.dataQuality.warnings.length > 0 && (
-                                <Box mt={0.5}>
-                                  <Typography variant="caption" fontWeight={600}>Warnungen:</Typography>
+                                <Box sx={{ mt: 0.5 }}>
+                                  <Typography variant="caption" sx={{ fontWeight: 600 }}>Warnungen:</Typography>
                                   {property.dataQuality.warnings.map((w, i) => (
-                                    <Typography key={i} variant="caption" display="block">• {w}</Typography>
+                                    <Typography key={i} variant="caption" sx={{ display: 'block' }}>• {w}</Typography>
                                   ))}
                                 </Box>
                               )}
@@ -337,7 +336,7 @@ export default function Properties() {
                       <TableCell>
                         <Chip
                           label={getAvailabilityLabel(property.availabilityStatus)}
-                          color={getAvailabilityColor(property.availabilityStatus)}
+                          sx={{ color: getAvailabilityColor(property.availabilityStatus) }}
                           size="small"
                         />
                       </TableCell>
diff --git a/src/pages/supply/SupplyDashboard.tsx b/src/pages/supply/SupplyDashboard.tsx
index 1293ac9..750df2f 100644
--- a/src/pages/supply/SupplyDashboard.tsx
+++ b/src/pages/supply/SupplyDashboard.tsx
@@ -91,7 +91,7 @@ export default function SupplyDashboard() {
     <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="h5" sx={{ fontWeight: 700 }} color="text.primary">Supply Dashboard</Typography>
         <Typography variant="body2" color="text.secondary">Portfolioübersicht und aktuelle Kennzahlen</Typography>
       </Box>
 
@@ -104,10 +104,10 @@ export default function SupplyDashboard() {
           <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>
+                <Typography variant="overline" color="text.secondary" sx={{ lineHeight: 1.4 }}>Objekte</Typography>
                 <Building2 size={20} color="#1e3a5f" />
               </Box>
-              <Typography variant="h3" fontWeight={700} color="text.primary">{properties.length}</Typography>
+              <Typography variant="h3" sx={{ fontWeight: 700 }} color="text.primary">{properties.length}</Typography>
               <Typography variant="caption" color="text.secondary">Gesamtportfolio</Typography>
             </Box>
           </Card>
@@ -116,10 +116,10 @@ export default function SupplyDashboard() {
           <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>
+                <Typography variant="overline" color="text.secondary" sx={{ 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="h3" sx={{ fontWeight: 700 }} color="text.primary">{matches.length}</Typography>
               <Typography variant="caption" color="text.secondary">KI-generierte Matches</Typography>
             </Box>
           </Card>
@@ -128,10 +128,10 @@ export default function SupplyDashboard() {
           <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>
+                <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" fontWeight={700} sx={{ color: avgQualityColor }}>
+              <Typography variant="h3" sx={{ fontWeight: 700,  color: avgQualityColor }}>
                 {Math.round(avgQuality * 100)}%
               </Typography>
               <Typography variant="caption" color="text.secondary">Durchschnittlicher Score</Typography>
@@ -142,10 +142,10 @@ export default function SupplyDashboard() {
           <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>
+                <Typography variant="overline" color="text.secondary" sx={{ 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' }}>
+              <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>
@@ -156,15 +156,15 @@ export default function SupplyDashboard() {
         {/* 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="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" fontWeight={700} color="text.primary">{marketCount}</Typography>
+            <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" fontWeight={700} color="text.primary">{futureCount}</Typography>
+            <Typography variant="h4" sx={{ fontWeight: 700 }} color="text.primary">{futureCount}</Typography>
             <Typography variant="body2" color="text.secondary">Zukunftssignale</Typography>
           </Card>
         </Box>
@@ -175,11 +175,11 @@ export default function SupplyDashboard() {
             <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>
+                  <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>
@@ -188,19 +188,19 @@ export default function SupplyDashboard() {
                   return (
                     <TableRow key={match.id} hover>
                       <TableCell>
-                        <Typography variant="body2" fontWeight={500}>{property?.title ?? match.propertyId}</Typography>
+                        <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" fontWeight={700}>{match.matchScore}</Typography>
+                          <Typography variant="body2" sx={{ 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'}
+                              sx={{ color: match.matchStrength === MatchStrength.STRONG ? 'success' : match.matchStrength === MatchStrength.MODERATE ? 'warning' : 'error' }}
                             />
                           </Box>
                         </Box>
@@ -208,7 +208,7 @@ export default function SupplyDashboard() {
                       <TableCell>
                         <Chip
                           label={getMatchStrengthLabel(match.matchStrength)}
-                          color={getMatchStrengthColor(match.matchStrength)}
+                          sx={{ color: getMatchStrengthColor(match.matchStrength) }}
                           size="small"
                         />
                       </TableCell>