andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Update UI

Browse source
This commit is contained in:
Andras Schmelczer 2026-02-01 11:07:58 +00:00
parent 2ac37ece97
commit 5f311233e4
10 changed files with 663 additions and 408 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/components/PropertiesPane.tsx
View file

@ -6,7 +6,6 @@ interface PropertiesPaneProps {
total: number;
loading: boolean;
hexagonId: string | null;
postcodeId?: string | null;
onLoadMore: () => void;
onClose: () => void;
}
@ -18,7 +17,6 @@ export function PropertiesPane({
total,
loading,
hexagonId,
postcodeId,
onLoadMore,
onClose,
}: PropertiesPaneProps) {
@ -38,11 +36,10 @@ export function PropertiesPane({
});
}, [properties, sortBy]);
const selectionId = hexagonId || postcodeId;
if (!selectionId) {
if (!hexagonId) {
return (
<div className="flex items-center justify-center h-full text-warm-500">
Click a hexagon or postcode to view properties
Click a hexagon to view properties
</div>
);
}
@ -52,9 +49,7 @@ export function PropertiesPane({
{/* Header */}
<div className="p-4 border-b border-warm-200">
<div className="flex justify-between items-center">
<h2 className="text-lg font-semibold">
{postcodeId ? `Properties in ${postcodeId}` : 'Properties in Hexagon'}
</h2>
<h2 className="text-lg font-semibold">Properties in Hexagon</h2>
<button
onClick={onClose}
className="text-warm-500 hover:text-warm-700 text-2xl leading-none"
@ -111,9 +106,8 @@ function formatDuration(d: string): string {
return d;
}
function formatAge(value: number): string {
// construction_age_band is a midpoint year, e.g. 1935
if (value >= 1000) return `~${Math.round(value)}`;
function formatAge(value: number, approximate = true): string {
if (value >= 1000) return approximate ? `~${Math.round(value)}` : `${Math.round(value)}`;
return Math.round(value).toString();
}
@ -136,7 +130,11 @@ function PropertyCard({ property }: { property: Property }) {
const price = getNum(property, 'Last known price', 'latest_price');
const pricePerSqm = getNum(property, 'Price per sqm', 'price_per_sqm');
const floorArea = getNum(property, 'Total floor area (sqm)', 'total_floor_area');
const rooms = getNum(property, 'Rooms (including bedrooms & bathrooms)', 'number_habitable_rooms');
const rooms = getNum(
property,
'Rooms (including bedrooms & bathrooms)',
'number_habitable_rooms'
);
const age = getNum(property, 'Approximate construction age', 'construction_age_band');
return (
@ -150,10 +148,7 @@ function PropertyCard({ property }: { property: Property }) {
<div className="mt-2 text-lg font-bold text-teal-700">
£{fmt(price)}
{pricePerSqm !== undefined && (
<span className="text-sm font-normal text-warm-600">
{' '}
(£{fmt(pricePerSqm)}/m²)
</span>
<span className="text-sm font-normal text-warm-600"> (£{fmt(pricePerSqm)}/m²)</span>
)}
</div>
)}
@ -187,7 +182,7 @@ function PropertyCard({ property }: { property: Property }) {
)}
{age !== undefined && (
<div>
<span className="text-warm-500">Built:</span> {formatAge(age)}
<span className="text-warm-500">Built:</span> {formatAge(age, property.is_construction_date_approximate ?? true)}
</div>
)}
{property.current_energy_rating && (
@ -197,8 +192,7 @@ function PropertyCard({ property }: { property: Property }) {
)}
{property.potential_energy_rating && (
<div>
<span className="text-warm-500">EPC potential:</span>{' '}
{property.potential_energy_rating}
<span className="text-warm-500">EPC potential:</span> {property.potential_energy_rating}
</div>
)}
</div>