mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
minor visual tweaks
This commit is contained in:
Khalim Conn-Kowlessar
parent
f8ca195b83
commit
88d2e8a22e
2 changed files with 99 additions and 83 deletions
|
|
@ -87,116 +87,131 @@ export default async function PlanDetail(props: {
|
|||
})();
|
||||
|
||||
return (
|
||||
<div className="max-w-[1400px] mx-auto py-10 space-y-12">
|
||||
<div className="max-w-[1400px] mx-auto py-6 space-y-12">
|
||||
{/* ── Header ─────────────────────────────────────────────────── */}
|
||||
<div>
|
||||
<h1 className="text-brandblue text-4xl md:text-5xl font-black font-manrope tracking-tighter text-brandblue mb-4">
|
||||
Plan Details: {planMeta.name ?? "Retrofit Plan"}
|
||||
</h1>
|
||||
<h2 className="text-brandblue text-2xl md:text-5xl font-black font-manrope tracking-tighter text-brandblue mb-2">
|
||||
Plan: {planMeta.name ?? "Retrofit Plan"}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* ── Executive Summary Bento ──────────────────────────────────── */}
|
||||
<section className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
||||
{/* EPC Rating card — redesigned with SAP IMPROVEMENT label */}
|
||||
<div className="md:col-span-2 lg:col-span-2 bg-white p-7 rounded-2xl border border-gray-100 shadow-sm flex flex-col gap-5">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">
|
||||
SAP Improvement
|
||||
</span>
|
||||
{/* EPC Rating card */}
|
||||
<div className="md:col-span-2 lg:col-span-2 bg-white p-7 rounded-2xl border border-gray-100 shadow-sm flex flex-col justify-between relative overflow-hidden group">
|
||||
{/* Decorative corner accent */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-green-500/5 rounded-bl-full -mr-10 -mt-10 transition-transform duration-700 group-hover:scale-110" />
|
||||
|
||||
{/* Current → Target letter badges */}
|
||||
<div className="flex items-end gap-3">
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
|
||||
Current
|
||||
</span>
|
||||
<span
|
||||
className="text-5xl font-black font-manrope leading-none"
|
||||
style={{ color: getEpcHex(currentEpc) }}
|
||||
>
|
||||
{currentEpc ?? "–"}
|
||||
<div>
|
||||
{/* Header label with decorative line */}
|
||||
<div className="flex items-center gap-2 mb-7">
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.2em] text-brandbrown whitespace-nowrap">
|
||||
EPC UPGRADE
|
||||
</span>
|
||||
<div className="h-px flex-1 bg-brandbrown/20" />
|
||||
</div>
|
||||
<svg
|
||||
className="w-5 h-5 text-gray-300 mb-2 shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2.5}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
|
||||
/>
|
||||
</svg>
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
|
||||
Target
|
||||
</span>
|
||||
<span
|
||||
className="text-7xl font-black font-manrope leading-none drop-shadow-lg"
|
||||
style={{ color: getEpcHex(targetEpc) }}
|
||||
|
||||
{/* Current → Target letter badges */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">
|
||||
Current
|
||||
</span>
|
||||
<span
|
||||
className="text-5xl font-black font-manrope leading-none"
|
||||
style={{ color: getEpcHex(currentEpc) }}
|
||||
>
|
||||
{currentEpc ?? "–"}
|
||||
</span>
|
||||
</div>
|
||||
<svg
|
||||
className="w-8 h-8 text-gray-300 shrink-0 animate-pulse"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
{targetEpc ?? "–"}
|
||||
</span>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
||||
/>
|
||||
</svg>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-[10px] font-bold text-green-500 uppercase tracking-wider mb-1">
|
||||
Target
|
||||
</span>
|
||||
<div className="relative">
|
||||
<span
|
||||
className="text-7xl font-black font-manrope leading-none"
|
||||
style={{
|
||||
color: getEpcHex(targetEpc),
|
||||
filter: "drop-shadow(0 10px 15px rgba(34,197,94,0.3))",
|
||||
}}
|
||||
>
|
||||
{targetEpc ?? "–"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* EPC gradient bar with official colors + current-position marker */}
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex justify-between text-[9px] font-semibold text-gray-400 px-0.5">
|
||||
<span>G · Least efficient</span>
|
||||
<span>Most efficient · A</span>
|
||||
</div>
|
||||
<div className="relative h-3 w-full rounded-full overflow-hidden">
|
||||
<div>
|
||||
{/* Gradient bar with current-position marker */}
|
||||
<div className="relative h-2 w-full bg-gray-100 rounded-full overflow-hidden mb-5">
|
||||
<div
|
||||
className="absolute inset-0 rounded-full"
|
||||
className="absolute inset-0 opacity-90"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(90deg, #e41e3b 0%, #ef8026 17%, #f3a96a 33%, #f7cd14 50%, #8dbd40 67%, #2da55c 83%, #117d58 100%)",
|
||||
"linear-gradient(90deg, #ba1a1a 0%, #c4a47c 50%, #22c55e 100%)",
|
||||
}}
|
||||
/>
|
||||
{currentEpc && (
|
||||
<div
|
||||
className="absolute top-0 h-full w-1 bg-white/90 shadow-sm z-10"
|
||||
className="absolute top-0 h-full w-1 bg-white shadow-sm z-10"
|
||||
style={{ left: `${epcToBandCenter(currentEpc)}%` }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* Letter labels beneath bar */}
|
||||
<div className="flex">
|
||||
{EPC_LETTERS.map((l) => (
|
||||
<div key={l} className="flex-1 flex justify-center">
|
||||
|
||||
{/* Bottom: SAP points summary */}
|
||||
<div className="flex justify-between items-end">
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-xs font-bold font-manrope text-brandblue tracking-tight">
|
||||
Projected Rating Increase
|
||||
</p>
|
||||
<p className="text-[11px] text-gray-500 font-medium">
|
||||
Improvement from{" "}
|
||||
<span
|
||||
className="text-[8px] font-bold"
|
||||
style={{
|
||||
color:
|
||||
l === currentEpc?.toUpperCase() ||
|
||||
l === targetEpc?.toUpperCase()
|
||||
? getEpcHex(l)
|
||||
: "#d1d5db",
|
||||
}}
|
||||
className="font-bold"
|
||||
style={{ color: getEpcHex(currentEpc) }}
|
||||
>
|
||||
{l}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{propertyMeta.currentSapPoints != null
|
||||
? Math.round(propertyMeta.currentSapPoints)
|
||||
: "–"}
|
||||
</span>{" "}
|
||||
to{" "}
|
||||
<span className="font-bold text-green-500">
|
||||
{planMeta.postSapPoints?.toFixed(1) ?? "–"}
|
||||
</span>{" "}
|
||||
SAP points
|
||||
</p>
|
||||
</div>
|
||||
<svg
|
||||
className="w-5 h-5 text-brandbrown shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs font-medium text-gray-500">
|
||||
SAP:{" "}
|
||||
<span className="text-gray-800 font-bold">
|
||||
{propertyMeta.currentSapPoints != null
|
||||
? Math.round(propertyMeta.currentSapPoints)
|
||||
: "–"}
|
||||
</span>
|
||||
{" → "}
|
||||
<span className="text-gray-800 font-bold">
|
||||
{planMeta.postSapPoints?.toFixed(1) ?? "–"}
|
||||
</span>
|
||||
{" points"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 4 stat tiles — cool blue background, icon at top */}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "preserve",
|
||||
"module": "esnext",
|
||||
"ignoreDeprecations": "5.0",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue