junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

added missing tooltip files

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2026-04-15 10:00:01 +00:00
parent c01f5bee40
commit ab872d8a73
3 changed files with 243 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
src/app/components/building-passport/CurrentEfficiencyCard.tsx Normal file
View file

@ -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 (
<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 }}
/>
{showLodgedBadge && (
<div className="absolute top-3 right-3 z-20 rounded-xl border-2 border-brandbrown/60 bg-white/90 px-3 py-2.5 shadow-sm">
<div className="flex items-center gap-1 mb-1">
<span className="text-[9px] font-bold uppercase tracking-widest text-brandbrown">
Lodged EPC
</span>
<LodgedEpcTooltip />
</div>
<div className="flex items-baseline gap-1.5">
<span
className="text-2xl font-black font-manrope leading-none"
style={{ color: lodgedHex }}
>
{lodgedLetter}
</span>
{originalSapPoints != null && (
<span className="text-xs font-bold text-gray-400">
/ {Math.round(originalSapPoints)}
</span>
)}
</div>
</div>
)}
<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 }}
>
{epcRating ?? "—"}
</span>
<span className="text-4xl font-bold font-manrope text-gray-400">
/ {sapPoints || "—"}
</span>
</div>
<p className="text-gray-500 font-medium text-sm max-w-xs leading-relaxed">
{getEpcDescription(epcRating)}
</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, sapPoints))}%`,
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>
);
}

67
src/app/components/building-passport/EpcInfoTooltip.tsx Normal file
View file

@ -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 (
<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>
);
}

58
src/app/components/building-passport/LodgedEpcTooltip.tsx Normal file
View file

@ -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 (
<TooltipProvider delayDuration={200}>
<Tooltip>
<TooltipTrigger asChild>
<button
className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-brandbrown/60 hover:text-brandbrown transition-colors focus:outline-none"
aria-label="Lodged EPC rating explanation"
>
<QuestionMarkCircleIcon className="w-3.5 h-3.5" />
</button>
</TooltipTrigger>
<TooltipContent
side="left"
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">Lodged EPC Rating</p>
<p className="text-[11px] text-gray-400 mt-0.5">From the official EPC register</p>
</div>
<div className="px-4 py-3 space-y-2.5">
<p className="text-[11px] text-gray-500 leading-snug">
This is the rating recorded on the{" "}
<span className="font-semibold text-gray-700">official EPC register</span> at the time of the last survey.
</p>
<p className="text-[11px] text-gray-500 leading-snug">
Your <span className="font-semibold text-gray-700">current rating</span> may differ because we re-model this property under{" "}
<span className="font-semibold text-gray-700">SAP 10</span>, which uses updated energy factors and can produce a different result than the original survey.
</p>
<p className="text-[11px] text-gray-500 leading-snug">
We also re-model when the EPC has{" "}
<span className="font-semibold text-gray-700">expired</span> or is{" "}
<span className="font-semibold text-gray-700">invalid</span>, or when you have told us the property has{" "}
<span className="font-semibold text-gray-700">changed</span> since the last survey.
</p>
</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">
SAP 10 is the latest version of the{" "}
<span className="font-semibold text-gray-600">Standard Assessment Procedure</span>, introduced to better reflect modern energy use and lower-carbon fuels.
</p>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}