From a45529f5bd9d63e7cef91f684702fa252aa5ca28 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Tue, 23 Sep 2025 23:33:14 +0000
Subject: [PATCH] update up to allow showing valuation when here isn't one

---
 .../ValuationImpactComponent.tsx              | 114 +++++++++++-------
 1 file changed, 71 insertions(+), 43 deletions(-)

diff --git a/src/app/components/building-passport/ValuationImpactComponent.tsx b/src/app/components/building-passport/ValuationImpactComponent.tsx
index 9a2d5d4..9f902f8 100644
--- a/src/app/components/building-passport/ValuationImpactComponent.tsx
+++ b/src/app/components/building-passport/ValuationImpactComponent.tsx
@@ -1,30 +1,32 @@
 "use client";
 
 import { useState } from "react";
-import React from 'react'
+import React from "react";
 import { FundingPackageWithMeasures } from "@/app/db/schema/funding";
 import { formatNumber } from "@/app/utils";
-import {Card, CardContent} from "@/app/shadcn_components/ui/card";
+import { Card, CardContent } from "@/app/shadcn_components/ui/card";
 import { Button } from "@/app/shadcn_components/ui/button";
-import { PiggyBank } from 'lucide-react'
-import { Dialog, Transition } from '@headlessui/react'
-import { Fragment } from 'react'
+import { PiggyBank } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment } from "react";
 import { FundingPackageMeasure } from "@/app/db/schema/funding";
 import { set } from "cypress/types/lodash";
 
-
 type FundingSummaryProps = {
   scheme: string | null;
-  onSeeMore: () => void
-}
+  onSeeMore: () => void;
+};
 
-export const FundingSummary: React.FC<FundingSummaryProps> = ({ scheme, onSeeMore }) => {
-  let message: string | null = null
+export const FundingSummary: React.FC<FundingSummaryProps> = ({
+  scheme,
+  onSeeMore,
+}) => {
+  let message: string | null = null;
 
   if (!scheme) {
-    message = 'Funding not assessed for this measure package'
-  } else if (scheme.toLowerCase() === 'none') {
-    message = 'Funding not eligible for this measure package'
+    message = "Funding not assessed for this measure package";
+  } else if (scheme.toLowerCase() === "none") {
+    message = "Funding not eligible for this measure package";
   }
 
   return (
@@ -55,8 +57,8 @@ export const FundingSummary: React.FC<FundingSummaryProps> = ({ scheme, onSeeMor
         )}
       </CardContent>
     </Card>
-  )
-}
+  );
+};
 
 export default function ValuationImpactComponent({
   currentValuation,
@@ -70,44 +72,65 @@ export default function ValuationImpactComponent({
   funding: FundingPackageWithMeasures;
 }) {
   const [fundingModalIsOpen, setFundingModalIsOpen] = useState(false);
-  // If we have no current valuation, we return no component
-  if (!currentValuation) {
-    return <></>;
-  }
 
   const lowerBoundValuation =
-    currentValuation + (valuationIncreaseLowerBound ?? 0);
+    currentValuation && valuationIncreaseLowerBound
+      ? currentValuation + valuationIncreaseLowerBound
+      : null;
+
   const upperBoundValuation =
-    currentValuation + (valuationIncreaseUpperBound ?? 0);
+    currentValuation && valuationIncreaseUpperBound
+      ? currentValuation + valuationIncreaseUpperBound
+      : null;
 
   function openFundingModal() {
     setFundingModalIsOpen(true);
   }
 
+  function renderCurrency(value: number | null) {
+    return value ? (
+      `£${formatNumber(value)}`
+    ) : (
+      <span className="text-gray-300 italic">Not available</span>
+    );
+  }
+
   return (
     <div className="col-span-1 md:col-span-2 lg:col-span-3 w-full p-4 bg-brandblue rounded-lg shadow-md grid grid-cols-1 md:grid-cols-3 gap-6">
+      {/* Current Valuation */}
       <div className="flex flex-col items-center justify-center text-center h-full space-y-1">
         <span className="text-gray-100 text-lg">Current Property Value</span>
         <span className="text-3xl font-bold text-brandbrown">
-          £{formatNumber(currentValuation)}
+          {currentValuation
+            ? `£${formatNumber(currentValuation)}`
+            : "Not available"}
         </span>
       </div>
 
+      {/* 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>
-        <div className="text-2xl text-brandbrown font-bold">
-          £{formatNumber(lowerBoundValuation)} - £{formatNumber(upperBoundValuation)}
-        </div>
-        <span className="text-gray-100 text-lg">Estimated improvement:</span>
-        <span className="text-brandbrown font-bold">
-          £{formatNumber(valuationIncreaseLowerBound || 0)} - £{formatNumber(valuationIncreaseUpperBound || 0)}
-        </span>
+        {lowerBoundValuation && upperBoundValuation ? (
+          <>
+            <div className="text-2xl text-brandbrown font-bold">
+              £{formatNumber(lowerBoundValuation)} - £
+              {formatNumber(upperBoundValuation)}
+            </div>
+            <span className="text-gray-100 text-lg">
+              Estimated improvement:
+            </span>
+            <span className="text-brandbrown font-bold">
+              £{formatNumber(valuationIncreaseLowerBound || 0)} - £
+              {formatNumber(valuationIncreaseUpperBound || 0)}
+            </span>
+          </>
+        ) : (
+          <span className="text-lg text-gray-300 italic">Not available</span>
+        )}
       </div>
 
-      <FundingSummary
-        scheme={funding?.scheme}
-        onSeeMore={openFundingModal}
-      />
+      {/* Funding summary always shown */}
+      <FundingSummary scheme={funding?.scheme} onSeeMore={openFundingModal} />
       <FundingSummaryModal
         isOpen={fundingModalIsOpen}
         closeModal={() => setFundingModalIsOpen(false)}
@@ -118,13 +141,12 @@ export default function ValuationImpactComponent({
   );
 }
 
-
 type FundingSummaryModalProps = {
-  isOpen: boolean
-  closeModal: () => void
+  isOpen: boolean;
+  closeModal: () => void;
   scheme?: string | null;
-  fundingPackageMeasures: FundingPackageMeasure[]
-}
+  fundingPackageMeasures: FundingPackageMeasure[];
+};
 
 export function FundingSummaryModal({
   isOpen,
@@ -161,19 +183,25 @@ export function FundingSummaryModal({
               <Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                 <Dialog.Title className="text-xl font-semibold text-brandblue flex items-center gap-2 mb-4">
                   <PiggyBank className="h-5 w-5 text-brandbrown" />
-                  {scheme?.toUpperCase() || 'Funding Details'}
+                  {scheme?.toUpperCase() || "Funding Details"}
                 </Dialog.Title>
 
                 <p className="text-sm text-gray-700 mb-4">
-                  This package has been optimised to meet the eligibility criteria of the <strong>{scheme?.toUpperCase()}</strong> funding scheme. Measures have been selected to maximise the property’s improvement while minimising cost and ensuring compliance.
+                  This package has been optimised to meet the eligibility
+                  criteria of the <strong>{scheme?.toUpperCase()}</strong>{" "}
+                  funding scheme. Measures have been selected to maximise the
+                  property’s improvement while minimising cost and ensuring
+                  compliance.
                 </p>
 
                 <div className="mb-4">
-                  <h4 className="text-sm font-semibold text-brandblue mb-2">Included Measures</h4>
+                  <h4 className="text-sm font-semibold text-brandblue mb-2">
+                    Included Measures
+                  </h4>
                   <ul className="list-disc list-inside text-sm text-gray-800 space-y-1">
                     {fundingPackageMeasures.map((measure) => (
                       <li key={measure.id.toString()}>
-                        {measure.measure.replace(/_/g, ' ')}
+                        {measure.measure.replace(/_/g, " ")}
                       </li>
                     ))}
                   </ul>
@@ -194,5 +222,5 @@ export function FundingSummaryModal({
         </div>
       </Dialog>
     </Transition>
-  )
+  );
 }