mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
added notify for user when we've remodelled
This commit is contained in:
Khalim Conn-Kowlessar
parent
b894591024
commit
c01f5bee40
5 changed files with 14 additions and 212 deletions
|
|
@ -26,6 +26,7 @@ export async function GET(request: NextRequest, props: { params: Promise<{ prope
|
|||
tenure: true,
|
||||
currentEpcRating: true,
|
||||
currentSapPoints: true,
|
||||
originalSapPoints: true,
|
||||
updatedAt: true,
|
||||
currentValuation: true,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ export interface PropertyMeta {
|
|||
tenure: string;
|
||||
currentEpcRating: string;
|
||||
currentSapPoints: number;
|
||||
originalSapPoints: number | null;
|
||||
updatedAt: string;
|
||||
currentValuation: number | null;
|
||||
detailsEpc: {
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/app/shadcn_components/ui/tooltip";
|
||||
|
||||
const EPC_BANDS = [
|
||||
{ band: "A", range: "92–100", color: "#117d58", desc: "Exceptional, near-zero energy bills, usually new-builds or eco-homes." },
|
||||
{ band: "B", range: "81–91", color: "#2da55c", desc: "Very efficient, often featuring solar panels, high-grade insulation, and modern heating." },
|
||||
{ band: "C", range: "69–80", color: "#8dbd40", desc: "Good, above-average efficiency; common target for retrofitting existing homes." },
|
||||
{ band: "D", range: "55–68", color: "#f7cd14", desc: "Average, the typical rating for many homes in the UK." },
|
||||
{ band: "E", range: "39–54", color: "#f3a96a", desc: "Below average, likely requires better insulation and boiler upgrades." },
|
||||
{ band: "F", range: "21–38", color: "#ef8026", desc: "Poor, high energy costs and lower energy performance." },
|
||||
{ band: "G", range: "1–20", color: "#e41e3b", desc: "Very poor, least efficient, high energy costs." },
|
||||
];
|
||||
|
||||
export function EpcInfoTooltip() {
|
||||
return (
|
||||
<TooltipProvider delayDuration={200}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
className="inline-flex items-center justify-center w-4 h-4 rounded-full text-gray-400 hover:text-brandblue transition-colors focus:outline-none"
|
||||
aria-label="EPC and SAP score explanation"
|
||||
>
|
||||
<QuestionMarkCircleIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="right"
|
||||
className="max-w-xs p-0 overflow-hidden border-gray-200 shadow-xl"
|
||||
sideOffset={8}
|
||||
>
|
||||
<div className="px-4 pt-3 pb-2 bg-gray-50 border-b border-gray-100">
|
||||
<p className="text-xs font-bold text-gray-700 uppercase tracking-widest">EPC Rating Bands</p>
|
||||
<p className="text-[11px] text-gray-400 mt-0.5">Based on the SAP score (1–100)</p>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-50">
|
||||
{EPC_BANDS.map(({ band, range, color, desc }) => (
|
||||
<div key={band} className="flex items-start gap-3 px-4 py-2.5">
|
||||
<span
|
||||
className="shrink-0 w-6 h-6 rounded-md flex items-center justify-center text-white text-xs font-black leading-none mt-0.5"
|
||||
style={{ backgroundColor: color }}
|
||||
>
|
||||
{band}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[11px] font-bold text-gray-700">{range}</p>
|
||||
<p className="text-[11px] text-gray-400 leading-snug mt-0.5">{desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="px-4 py-2.5 bg-gray-50 border-t border-gray-100">
|
||||
<p className="text-[11px] text-gray-400 leading-snug">
|
||||
<span className="font-semibold text-gray-600">SAP score</span> — Standard Assessment Procedure. A government-approved method for rating the energy performance of homes on a scale of 1 to 100.
|
||||
</p>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -18,36 +18,10 @@ import {
|
|||
import { getSolarData, getSolarScenarioData } from "../solar-analysis/utils";
|
||||
import PropertyMapWrapper from "../solar-analysis/PropertyMapWrapper";
|
||||
import SolarSimulationWrapper from "../solar-analysis/SolarSimulationWrapper";
|
||||
import { EpcInfoTooltip } from "./EpcInfoTooltip";
|
||||
import { CurrentEfficiencyCard } from "@/app/components/building-passport/CurrentEfficiencyCard";
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function getEpcHex(letter: string | null | undefined): string {
|
||||
switch (letter?.toUpperCase()) {
|
||||
case "A": return "#117d58";
|
||||
case "B": return "#2da55c";
|
||||
case "C": return "#8dbd40";
|
||||
case "D": return "#f7cd14";
|
||||
case "E": return "#f3a96a";
|
||||
case "F": return "#ef8026";
|
||||
case "G": return "#e41e3b";
|
||||
default: return "#9ca3af";
|
||||
}
|
||||
}
|
||||
|
||||
function getEpcDescription(letter: string | null | undefined): string {
|
||||
switch (letter?.toUpperCase()) {
|
||||
case "A":
|
||||
case "B": return "This property is performing at or above modern energy standards.";
|
||||
case "C": return "This property meets modern energy performance benchmarks.";
|
||||
case "D": return "This property is performing slightly below modern energy standards.";
|
||||
case "E": return "This property is performing below modern energy standards.";
|
||||
case "F":
|
||||
case "G": return "This property is performing significantly below modern energy standards.";
|
||||
default: return "Energy performance data is not yet available for this property.";
|
||||
}
|
||||
}
|
||||
|
||||
function getDirectionLabel(az: number): { label: string; short: string } {
|
||||
const norm = ((az % 360) + 360) % 360;
|
||||
if (norm >= 337.5 || norm < 22.5) return { short: "N", label: "North" };
|
||||
|
|
@ -211,10 +185,6 @@ export default async function PreAssessmentReport(props: {
|
|||
const rawSolar = await getSolarData(Number(propertyMeta.uprn));
|
||||
const solarData = rawSolar ?? null;
|
||||
|
||||
const epcLetter = propertyMeta.currentEpcRating ?? null;
|
||||
const sapScore = propertyMeta.currentSapPoints ?? 0;
|
||||
const epcHex = getEpcHex(epcLetter);
|
||||
|
||||
// Solar derived values
|
||||
const sp = solarData?.googleApiResponse?.solarPotential ?? null;
|
||||
const solarScenarioData = solarData ? await getSolarScenarioData(String(solarData.id)) : null;
|
||||
|
|
@ -265,49 +235,11 @@ export default async function PreAssessmentReport(props: {
|
|||
<div className="grid grid-cols-12 gap-6 items-stretch">
|
||||
|
||||
{/* EPC Hero — matches overview page style */}
|
||||
<section className="col-span-12 lg:col-span-5 bg-white rounded-2xl p-10 flex flex-col justify-between shadow-sm border border-gray-100 relative overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-72 h-72 rounded-full blur-3xl -mr-20 -mt-20 opacity-10"
|
||||
style={{ backgroundColor: epcHex }}
|
||||
/>
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<p className="font-manrope text-xs font-bold text-brandmidblue uppercase tracking-widest">
|
||||
Current Efficiency State
|
||||
</p>
|
||||
<EpcInfoTooltip />
|
||||
</div>
|
||||
<div className="flex items-baseline gap-4 mb-4">
|
||||
<span
|
||||
className="text-[110px] font-black font-manrope leading-none tracking-tighter"
|
||||
style={{ color: epcHex }}
|
||||
>
|
||||
{epcLetter ?? "—"}
|
||||
</span>
|
||||
<span className="text-4xl font-bold font-manrope text-gray-400">
|
||||
/ {sapScore || "—"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-500 font-medium text-sm max-w-xs leading-relaxed">
|
||||
{getEpcDescription(epcLetter)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-10 space-y-3">
|
||||
<div className="relative h-2.5 w-full bg-gray-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 rounded-full"
|
||||
style={{
|
||||
width: `${Math.min(100, Math.max(2, sapScore))}%`,
|
||||
background: "linear-gradient(to right, #e41e3b, #ef8026, #f7cd14, #8dbd40, #117d58)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] font-bold text-gray-400 uppercase tracking-wider">
|
||||
<span>Very Inefficient</span>
|
||||
<span>Very Efficient</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CurrentEfficiencyCard
|
||||
epcRating={propertyMeta.currentEpcRating ?? null}
|
||||
sapPoints={propertyMeta.currentSapPoints ?? 0}
|
||||
originalSapPoints={propertyMeta.originalSapPoints}
|
||||
/>
|
||||
|
||||
{/* Right column: 3 metric cards + general features grid */}
|
||||
<div className="col-span-12 lg:col-span-7 flex flex-col gap-6">
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
getInstalledMeasuresByUprn,
|
||||
} from "./utils";
|
||||
import { HeritageTooltip } from "./HeritageTooltip";
|
||||
import { CurrentEfficiencyCard } from "@/app/components/building-passport/CurrentEfficiencyCard";
|
||||
|
||||
export const revalidate = 1;
|
||||
|
||||
|
|
@ -25,33 +26,6 @@ function formatGbp(value: number | null | undefined): string {
|
|||
return `£${Math.round(value).toLocaleString("en-GB")}`;
|
||||
}
|
||||
|
||||
/** Map EPC letter to its hex color from the project's palette */
|
||||
function getEpcHex(letter: string | null | undefined): string {
|
||||
switch (letter?.toUpperCase()) {
|
||||
case "A": return "#117d58";
|
||||
case "B": return "#2da55c";
|
||||
case "C": return "#8dbd40";
|
||||
case "D": return "#f7cd14";
|
||||
case "E": return "#f3a96a";
|
||||
case "F": return "#ef8026";
|
||||
case "G": return "#e41e3b";
|
||||
default: return "#9ca3af";
|
||||
}
|
||||
}
|
||||
|
||||
function getEpcDescription(letter: string | null | undefined): string {
|
||||
switch (letter?.toUpperCase()) {
|
||||
case "A":
|
||||
case "B": return "This property is performing at or above modern energy standards.";
|
||||
case "C": return "This property meets modern energy performance benchmarks.";
|
||||
case "D": return "This property is performing slightly below modern energy standards.";
|
||||
case "E": return "This property is performing below modern energy standards.";
|
||||
case "F":
|
||||
case "G": return "This property is performing significantly below modern energy standards.";
|
||||
default: return "Energy performance data is not yet available for this property.";
|
||||
}
|
||||
}
|
||||
|
||||
// ── Sub-components ────────────────────────────────────────────────────────────
|
||||
|
||||
function SectionHeading({ icon, label }: { icon: React.ReactNode; label: string }) {
|
||||
|
|
@ -102,10 +76,6 @@ export default async function BuildingPassportHome(props: {
|
|||
(conditionReport.hotWaterEnergyCostCurrent ?? 0) +
|
||||
(conditionReport.lightingEnergyCostCurrent ?? 0);
|
||||
|
||||
const epcLetter = propertyMeta.currentEpcRating ?? null;
|
||||
const sapScore = propertyMeta.currentSapPoints ?? 0;
|
||||
const epcHex = getEpcHex(epcLetter);
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-6 py-10 space-y-6">
|
||||
|
||||
|
|
@ -113,46 +83,11 @@ export default async function BuildingPassportHome(props: {
|
|||
<div className="grid grid-cols-12 gap-6">
|
||||
|
||||
{/* EPC Hero */}
|
||||
<section className="col-span-12 lg:col-span-5 bg-white rounded-2xl p-10 flex flex-col justify-between shadow-sm border border-gray-100 relative overflow-hidden">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-72 h-72 rounded-full blur-3xl -mr-20 -mt-20 opacity-10"
|
||||
style={{ backgroundColor: epcHex }}
|
||||
/>
|
||||
<div className="relative z-10">
|
||||
<p className="font-manrope text-xs font-bold text-brandmidblue uppercase tracking-widest mb-6">
|
||||
Current Efficiency State
|
||||
</p>
|
||||
<div className="flex items-baseline gap-4 mb-4">
|
||||
<span
|
||||
className="text-[110px] font-black font-manrope leading-none tracking-tighter"
|
||||
style={{ color: epcHex }}
|
||||
>
|
||||
{epcLetter ?? "—"}
|
||||
</span>
|
||||
<span className="text-4xl font-bold font-manrope text-gray-400">
|
||||
/ {sapScore || "—"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-500 font-medium text-sm max-w-xs leading-relaxed">
|
||||
{getEpcDescription(epcLetter)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-10 space-y-3">
|
||||
<div className="relative h-2.5 w-full bg-gray-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 rounded-full"
|
||||
style={{
|
||||
width: `${Math.min(100, Math.max(2, sapScore))}%`,
|
||||
background: "linear-gradient(to right, #e41e3b, #ef8026, #f7cd14, #8dbd40, #117d58)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] font-bold text-gray-400 uppercase tracking-wider">
|
||||
<span>Very Inefficient</span>
|
||||
<span>Very Efficient</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CurrentEfficiencyCard
|
||||
epcRating={propertyMeta.currentEpcRating ?? null}
|
||||
sapPoints={propertyMeta.currentSapPoints ?? 0}
|
||||
originalSapPoints={propertyMeta.originalSapPoints}
|
||||
/>
|
||||
|
||||
{/* Energy Stats + Heritage Status */}
|
||||
<div className="col-span-12 lg:col-span-7 flex flex-col gap-4">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue