Benjamin Sutter
07cea21143
Add EmbeddedPropertyCard and surface matching properties inside the public need detail view. Add needToParsedCriteria() mapper to convert a stored Need back into parsed criteria for re-running search/matching. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import { Box, Chip, Paper, Typography } from '@mui/material'
|
|
import { MapPin } from 'lucide-react'
|
|
import type { LatentNeed } from '../../domain/latentNeed'
|
|
import { assetTypeLabel, latentStatusBadge } from './latentNeedUtils'
|
|
|
|
interface PublicNeedCardProps {
|
|
need: LatentNeed
|
|
selected: boolean
|
|
onClick: () => void
|
|
}
|
|
|
|
function opportunityColor(status: 'public' | 'paused' | 'expired'): string {
|
|
if (status === 'public') return '#16a34a'
|
|
if (status === 'paused') return '#d97706'
|
|
return '#94a3b8'
|
|
}
|
|
|
|
export function PublicNeedCard({ need, selected, onClick }: PublicNeedCardProps) {
|
|
const statusCfg = latentStatusBadge(need.status)
|
|
return (
|
|
<Paper
|
|
onClick={onClick}
|
|
elevation={0}
|
|
sx={{
|
|
p: 1.5,
|
|
borderRadius: 1.5,
|
|
border: '1px solid',
|
|
borderColor: selected ? '#152642' : '#e8e7e4',
|
|
bgcolor: selected ? '#f1f5f9' : 'white',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.15s',
|
|
'&:hover': {
|
|
borderColor: selected ? '#152642' : '#94a3b8',
|
|
boxShadow: '0 2px 6px rgba(15,23,42,0.06)',
|
|
},
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 0.75,
|
|
}}
|
|
>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1, alignItems: 'flex-start' }}>
|
|
<Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.85rem', lineHeight: 1.3 }}>
|
|
{need.title}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexShrink: 0 }}>
|
|
<Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: opportunityColor(need.status) }} />
|
|
<Chip
|
|
label={statusCfg.label}
|
|
size="small"
|
|
sx={{ bgcolor: statusCfg.bg, color: statusCfg.fg, fontWeight: 600, fontSize: '0.65rem', height: 20 }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
{need.tenantCompany && (
|
|
<Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.75rem' }}>
|
|
{need.tenantCompany}
|
|
</Typography>
|
|
)}
|
|
|
|
<Chip
|
|
label={assetTypeLabel(need.assetType)}
|
|
size="small"
|
|
sx={{
|
|
alignSelf: 'flex-start',
|
|
bgcolor: '#e0e7ff',
|
|
color: '#3730a3',
|
|
fontWeight: 600,
|
|
fontSize: '0.7rem',
|
|
height: 20,
|
|
}}
|
|
/>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, color: '#475569', fontSize: '0.75rem' }}>
|
|
<MapPin size={12} />
|
|
<Typography variant="caption" sx={{ fontSize: '0.75rem' }}>
|
|
{need.desiredLocation}
|
|
</Typography>
|
|
</Box>
|
|
</Paper>
|
|
)
|
|
}
|