Benjamin Sutter
f487435a94
- NeedAlignmentPanel: display budget row in monthly (CHF/m²/Mt.) to match the Preis section, use exact division (no Math.round) to avoid 13×12≠152 - MatchDetailPropertySections + PropertyDetailPublicSections: replace Math.round(rentPricePerSqm/12) with exact division; show 2 decimal places when monthly is not a whole number (e.g. CHF 12.67 instead of CHF 13) - Add /Jahr suffix to all 15 displays showing rentPricePerSqm or maxPerSqm without a time unit across results, compare, match-detail, supply, and anfragencenter components Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
import { Box, Typography } from '@mui/material'
|
|
import { FileText } from 'lucide-react'
|
|
import { useOfferWizardStore } from '../../stores/offerWizardStore'
|
|
import { mockProperties } from '../../mock-data/properties'
|
|
|
|
interface MockPdfPreviewProps {
|
|
fields: Record<string, string>
|
|
fallbackFields: Record<string, string>
|
|
}
|
|
|
|
export function MockPdfPreview({ fields, fallbackFields }: MockPdfPreviewProps) {
|
|
const needTitle = useOfferWizardStore(s => s.needTitle)
|
|
const propertyIds = useOfferWizardStore(s => s.selectedPropertyIds)
|
|
|
|
const properties = mockProperties.filter(p => propertyIds.includes(p.id))
|
|
|
|
const v = (id: string) => fields[id] ?? fallbackFields[id] ?? ''
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
bgcolor: 'white',
|
|
borderRadius: 1.5,
|
|
border: '1px solid #cbd5e1',
|
|
boxShadow: '0 4px 16px rgba(15,23,42,0.08)',
|
|
p: 4,
|
|
height: '100%',
|
|
overflowY: 'auto',
|
|
fontFamily: '"Georgia", "Times New Roman", serif',
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3, color: '#64748b' }}>
|
|
<FileText size={16} />
|
|
<Typography variant="caption" sx={{ textTransform: 'uppercase', letterSpacing: 1, fontSize: '0.7rem' }}>
|
|
Angebotsvorschau (PDF)
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', textAlign: 'right' }}>
|
|
Wincasa AG · Zürich
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ display: 'block', color: '#94a3b8', textAlign: 'right', mb: 4 }}>
|
|
{new Date().toLocaleDateString('de-CH')}
|
|
</Typography>
|
|
|
|
<Typography variant="h6" sx={{ fontWeight: 700, color: '#0f172a', mb: 2, fontSize: '1.05rem' }}>
|
|
Angebot: {needTitle}
|
|
</Typography>
|
|
|
|
<Typography variant="body2" sx={{ mb: 1.5, fontSize: '0.875rem' }}>
|
|
{v('recipient_salutation')},
|
|
</Typography>
|
|
|
|
<Typography variant="body2" sx={{ mb: 2, fontSize: '0.875rem', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
|
|
{v('offer_intro')}
|
|
</Typography>
|
|
|
|
<Typography variant="body2" sx={{ mb: 1, fontWeight: 700, fontSize: '0.875rem' }}>
|
|
Hervorgehobene Kriterien
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ mb: 2.5, fontSize: '0.875rem', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
|
|
{v('highlighted_criteria')}
|
|
</Typography>
|
|
|
|
<Typography variant="body2" sx={{ mb: 1, fontWeight: 700, fontSize: '0.875rem' }}>
|
|
Vorgeschlagene Objekte
|
|
</Typography>
|
|
<Box component="ul" sx={{ pl: 2, mb: 2.5 }}>
|
|
{properties.map(p => (
|
|
<Typography
|
|
key={p.id}
|
|
component="li"
|
|
variant="body2"
|
|
sx={{ fontSize: '0.875rem', mb: 0.5, lineHeight: 1.5 }}
|
|
>
|
|
<strong>{p.title}</strong> — {p.location.city}, {p.areaSqm.toLocaleString('de-CH')} m², CHF {p.rentPricePerSqm}/m²/Jahr
|
|
</Typography>
|
|
))}
|
|
{properties.length === 0 && (
|
|
<Typography variant="body2" sx={{ color: '#94a3b8', fontStyle: 'italic' }}>
|
|
Keine Objekte ausgewählt.
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
|
|
<Typography variant="body2" sx={{ mb: 2.5, fontSize: '0.875rem', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
|
|
{v('next_steps')}
|
|
</Typography>
|
|
|
|
<Typography variant="body2" sx={{ fontSize: '0.875rem', whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
|
|
{v('closing')}
|
|
</Typography>
|
|
</Box>
|
|
)
|
|
}
|