diff --git a/src/app/components/building-passport/CurrentEfficiencyCard.tsx b/src/app/components/building-passport/CurrentEfficiencyCard.tsx new file mode 100644 index 00000000..abcd2a69 --- /dev/null +++ b/src/app/components/building-passport/CurrentEfficiencyCard.tsx @@ -0,0 +1,118 @@ +import { sapToEpc } from "@/app/utils"; +import { EpcInfoTooltip } from "./EpcInfoTooltip"; +import { LodgedEpcTooltip } from "./LodgedEpcTooltip"; + +interface CurrentEfficiencyCardProps { + epcRating: string | null; + sapPoints: number; + originalSapPoints?: number | null; +} + +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."; + } +} + +export function CurrentEfficiencyCard({ + epcRating, + sapPoints, + originalSapPoints, +}: CurrentEfficiencyCardProps) { + const epcHex = getEpcHex(epcRating); + const lodgedLetter = originalSapPoints ? sapToEpc(originalSapPoints) : null; + const showLodgedBadge = lodgedLetter !== null && lodgedLetter !== epcRating; + const lodgedHex = getEpcHex(lodgedLetter); + + return ( +
+
+ + {showLodgedBadge && ( +
+
+ + Lodged EPC + + +
+
+ + {lodgedLetter} + + {originalSapPoints != null && ( + + / {Math.round(originalSapPoints)} + + )} +
+
+ )} + +
+
+

+ Current Efficiency State +

+ +
+
+ + {epcRating ?? "—"} + + + / {sapPoints || "—"} + +
+

+ {getEpcDescription(epcRating)} +

+
+ +
+
+
+
+
+ Very Inefficient + Very Efficient +
+
+
+ ); +} diff --git a/src/app/components/building-passport/EpcInfoTooltip.tsx b/src/app/components/building-passport/EpcInfoTooltip.tsx new file mode 100644 index 00000000..bdc7d174 --- /dev/null +++ b/src/app/components/building-passport/EpcInfoTooltip.tsx @@ -0,0 +1,67 @@ +"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 ( + + + + + + +
+

EPC Rating Bands

+

Based on the SAP score (1–100)

+
+
+ {EPC_BANDS.map(({ band, range, color, desc }) => ( +
+ + {band} + +
+

{range}

+

{desc}

+
+
+ ))} +
+
+

+ SAP score — Standard Assessment Procedure. A government-approved method for rating the energy performance of homes on a scale of 1 to 100. +

+
+ + + + ); +} diff --git a/src/app/components/building-passport/LodgedEpcTooltip.tsx b/src/app/components/building-passport/LodgedEpcTooltip.tsx new file mode 100644 index 00000000..b37b1f1d --- /dev/null +++ b/src/app/components/building-passport/LodgedEpcTooltip.tsx @@ -0,0 +1,58 @@ +"use client"; + +import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/app/shadcn_components/ui/tooltip"; + +export function LodgedEpcTooltip() { + return ( + + + + + + +
+

Lodged EPC Rating

+

From the official EPC register

+
+
+

+ This is the rating recorded on the{" "} + official EPC register at the time of the last survey. +

+

+ Your current rating may differ because we re-model this property under{" "} + SAP 10, which uses updated energy factors and can produce a different result than the original survey. +

+

+ We also re-model when the EPC has{" "} + expired or is{" "} + invalid, or when you have told us the property has{" "} + changed since the last survey. +

+
+
+

+ SAP 10 is the latest version of the{" "} + Standard Assessment Procedure, introduced to better reflect modern energy use and lower-carbon fuels. +

+
+ + + + ); +}