From 88d2e8a22e9c667f0ac819645793dfbe3a141e91 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Fri, 10 Apr 2026 22:49:00 +0000
Subject: [PATCH] minor visual tweaks

---
 .../[propertyId]/plans/[planId]/page.tsx      | 179 ++++++++++--------
 tsconfig.json                                 |   3 +-
 2 files changed, 99 insertions(+), 83 deletions(-)

diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx
index eb4d51d..320f668 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/plans/[planId]/page.tsx
@@ -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 */}
diff --git a/tsconfig.json b/tsconfig.json
index 590486f..8c2d3c1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,8 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "preserve",
+    "module": "esnext",
+    "ignoreDeprecations": "5.0",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,