From da5e957772bcafa509e569e6c0d912ff23d9ae49 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Mon, 27 Oct 2025 16:25:28 +0000
Subject: [PATCH] added percentage valuation uplift

---
 .../ValuationImpactComponent.tsx              | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/app/components/building-passport/ValuationImpactComponent.tsx b/src/app/components/building-passport/ValuationImpactComponent.tsx
index 9f902f8..636565d 100644
--- a/src/app/components/building-passport/ValuationImpactComponent.tsx
+++ b/src/app/components/building-passport/ValuationImpactComponent.tsx
@@ -87,12 +87,11 @@ export default function ValuationImpactComponent({
     setFundingModalIsOpen(true);
   }
 
-  function renderCurrency(value: number | null) {
-    return value ? (
-      `£${formatNumber(value)}`
-    ) : (
-      <span className="text-gray-300 italic">Not available</span>
-    );
+  function formatPercent(value: number | null): string {
+    if (value === null || isNaN(value)) return "–";
+    const percent = value * 100;
+    // Show no decimals if it's a whole number, otherwise 1 decimal
+    return Number.isInteger(percent) ? percent.toString() : percent.toFixed(1);
   }
 
   return (
@@ -110,7 +109,9 @@ export default function ValuationImpactComponent({
       {/* After Retrofit Valuation */}
       <div className="flex flex-col items-center justify-center text-center space-y-1">
         <span className="text-gray-100 text-lg">After Retrofit Valuation</span>
-        {lowerBoundValuation && upperBoundValuation ? (
+
+        {currentValuation && lowerBoundValuation && upperBoundValuation ? (
+          // CASE 1: Absolute £ valuations available
           <>
             <div className="text-2xl text-brandbrown font-bold">
               £{formatNumber(lowerBoundValuation)} - £
@@ -124,7 +125,26 @@ export default function ValuationImpactComponent({
               {formatNumber(valuationIncreaseUpperBound || 0)}
             </span>
           </>
+        ) : valuationIncreaseLowerBound !== null &&
+          valuationIncreaseUpperBound !== null ? (
+          // CASE 2: No base valuation, show % improvement
+          <>
+            <div className="text-2xl font-bold text-brandbrown flex items-baseline justify-center">
+              <span className="text-3xl font-extrabold text-brandbrown mr-1">
+                +
+              </span>
+              <span>{formatPercent(valuationIncreaseLowerBound)}</span>
+              <span className="mx-1">–</span>
+              <span>{formatPercent(valuationIncreaseUpperBound)}</span>
+              <span className="ml-1">%</span>
+            </div>
+
+            <span className="text-gray-100 text-lg">
+              Estimated value improvement
+            </span>
+          </>
         ) : (
+          // CASE 3: Nothing available
           <span className="text-lg text-gray-300 italic">Not available</span>
         )}
       </div>